Question

如何使用嵌套的*ngFor生成选择的选项？

<mat-form-field>
  <mat-label></mat-label>
  <select[(ngModel)]="data">
    <option *ngFor="let payload1 of payload;let payload2 of payload1" [value]="payload2.id">
      {{ payload2.name}}
    </option>
    </select>
</mat-form-field>

Answer 1

<ng-container *ngFor="let payload1 of payload;>
  <option *ngFor="let payload2 of payload1" [value]="payload2.id">
</ng-container>

编辑：

<select[(ngModel)]="data">
   <ng-container *ngFor="let payload1 of payload;>
     <option *ngFor="let payload2 of payload1" [value]="payload2.id">
   </ng-container>
</select>

Answer 2

您可以使用ng-container，它不会创建DOM对象，但可以操纵变量和模板代码。这样就可以给您：

<ng-container *ngFor="let payload1 of payload">
  <ng-container *ngFor="let payload2 of payload1">
    <option [value]="payload2.id">{{ payload2.name }}</option>
  </ng-container>
</ng-container>

如果愿意，您也可以将第二个ngFor放在option标记内。

* ngFor有两个let

2 个答案: