如何简化我编写 NgFor 脚本的方式？

Question

我正在尝试将数组列表放到一个对话框中。

在对话框中，我通过NgFor拉出数组的时候，我写的方式看起来很蠢

有什么优化脚本的方法吗？

将数据放入母页

  const dialogRef = this.dialog.open(NationalityDailogComponent, dialogConfig).afterClosed()
  .subscribe( data => {
    this.selectNationality = data;
            console.log(this.selectNationality);
  });

获取对话框页面中的数据

ngOnInit() {
    this.NationlityList = this.passedData; 
}

提取数据

<div *ngFor="let item of NationlityList.NationlityList; let i = index">
  <div *ngIf="i % 6 == 0" class="row">
      <mat-checkbox *ngIf="i + 0 < NationlityList.NationlityList.length" (change)="onCheckboxChecked($event, NationlityList.NationlityList[i].Nationality)"> {{ NationlityList.NationlityList[i].Nationality }} </mat-checkbox>
      <mat-checkbox *ngIf="i + 1 < NationlityList.NationlityList.length" (change)="onCheckboxChecked($event, NationlityList.NationlityList[i+1].Nationality)"> {{ NationlityList.NationlityList[i+1].Nationality }} </mat-checkbox>
      <mat-checkbox *ngIf="i + 2 < NationlityList.NationlityList.length" (change)="onCheckboxChecked($event, NationlityList.NationlityList[i+2].Nationality)"> {{ NationlityList.NationlityList[i+2].Nationality }} </mat-checkbox>
      <mat-checkbox *ngIf="i + 3 < NationlityList.NationlityList.length" (change)="onCheckboxChecked($event, NationlityList.NationlityList[i+3].Nationality)"> {{ NationlityList.NationlityList[i+3].Nationality }} </mat-checkbox>
      <mat-checkbox *ngIf="i + 4 < NationlityList.NationlityList.length" (change)="onCheckboxChecked($event, NationlityList.NationlityList[i+4].Nationality)"> {{ NationlityList.NationlityList[i+4].Nationality }} </mat-checkbox>
      <mat-checkbox *ngIf="i + 5 < NationlityList.NationlityList.length" (change)="onCheckboxChecked($event, NationlityList.NationlityList[i+5].Nationality)"> {{ NationlityList.NationlityList[i+5].Nationality }} </mat-checkbox>
  </div>
</div>

在组件中，我确实将 mat-checkbox 中的 'NationlityList.NationlityList' 替换为 'item'，但它不起作用。

Answer 1

我发现这里遗漏了一些东西（可能是你有但没有将其粘贴到代码段中）：

MAT_DIALOG_DATA 未注入对话框组件。
一旦数据被注入，因为看起来您正在传递一个 MatDialogConfig 类型的对象，您需要通过 "data" 属性从配置中访问数据。 IE。 this.NationlityList = this.passedData.data;
最后，也是一件小事，因为您在这里订阅，所以您不再拥有 dialogReference 而是订阅。

const dialogRef = this.dialog.open(NationalityDailogComponent, dialogConfig).afterClosed() .subscribe( 数据 => { this.selectNationality = 数据； console.log(this.selectNationality); });

如何简化我编写 NgFor 脚本的方式？

How to simplify the way I wrote the NgFor script?

angular

ngfor