*ngFor 有两个 let答案

【问题标题】：*ngFor with two let*ngFor 有两个 let
【发布时间】：2019-05-16 08:24:48
【问题描述】：

如何生成嵌套*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>

【问题讨论】：

标签： angular ngfor

【解决方案1】：

您可以使用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 标记内。

【讨论】：

谢谢，但是是否可以通过选择使其工作？
当然，只需用您的select 对象包装此代码即可。此代码只是替换您的 <option... 行，其余部分保持不变。
太好了，请接受一个答案并为你喜欢的答案点赞以结束你的问题:)

【解决方案2】：

<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>

【讨论】：

谢谢，但是是否可以通过选择使其工作？
你想要两个选择？已编辑。