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”属性从配置中访问数据。即this.NationlityList = this.passedData.data;
最后，这是一件小事，因为您在这里进行订阅，所以您不再有dialogReference，而是订阅了。

const dialogRef = this.dialog.open（NationalityDailogComponent， dialogConfig）.afterClosed（） .subscribe（data => { this.selectNationality =数据； console.log（this.selectNationality）; }）;

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

1 个答案: