javascript - 是否可以在 Angular 选择标签中使用 ngFor？

Question

所以，我有一个独特的用例，我必须显示多个选择标签，这些标签有多个选项(每个)。 因此，数据结构是对象数组的数组。

<div class="form-group row" *ngIf="myData">
  <select [(ngModel)]="singleData" *ngFor="let singleSelectGroup of myData; let i=index" class="form-control form-control-lg" name="mySelectGroup">
    <option *ngFor="let singleOptionGroup of singleSelectGroup" [ngValue]="singleTag">{{singleOption.name}}</option>
  </select>
</div>

现在，显然这不起作用，每次我从下拉列表中选择一个选项时，选择的任何其他选项都将变为空白，因为只有一个 ngModel。 有没有办法以 Angular 解决这种用例？ 此外，任何具有默认选择和禁用属性的选项标签也将变为空白。 任何帮助或插入正确的方向将不胜感激。

Answer 1

您可以改用数组，并将 ngModel 绑定(bind)到 array[i]。

这是一个基本示例，您可以根据需要对其进行自定义:

export class MyComponent {
  allData = [];
}

<div class="form-group row" *ngIf="myData">
  <select [(ngModel)]="allData[i]" *ngFor="let singleSelectGroup of myData; let i=index" class="form-control form-control-lg" name="mySelectGroup">
    <option *ngFor="let singleOptionGroup of singleSelectGroup" [ngValue]="singleTag">{{singleOption.name}}</option>
  </select>
</div>