angular - 数据绑定(bind)不更新 w/嵌套 ngFor 循环

Question

我有一系列下拉列表，每个字段对应一个要报告的下拉列表。每个下拉菜单都有一系列选项(每个选项都相同)。用户可以更改要报告的字段或添加更多字段。下拉列表似乎使用正确的值进行初始化，但在选择更改时不会更新模型。

我可以通过连接到 ngModelChange 来更新报告模型，但这似乎是额外的。我在其他领域取得了成功，但在包含可变数量的字符串列的可变数量的选择框方面却没有成功。

StackBlitz

*.html

<div *ngFor="let field of report.summaryFields.defaultFields">
    <select [(ngModel)]="field">
        <option *ngFor="let column of columns" [(ngValue)]="column">{{column}}</option>
    </select>
</div>

*.ts

report = {
    summaryFields: {
        defaultFields: ["FirstName", "LastName"],
        optionalFields: ["Age", "Grade"]
    }
};
columns = ["FirstName", "LastName", "Age", "Grade", "Teacher"]

Answer 1

要修改数组元素，您应该使用数组索引进行绑定(bind)，而不是 ngFor 循环变量。此外，请确保将 option 值与 [ngValue] 或 [value] 绑定(bind)，而不是与 [(ngValue)] 绑定(bind)。

<div *ngFor="let field of report.summaryFields.defaultFields; let i = index">
  <select [(ngModel)]="report.summaryFields.defaultFields[i]">
    <option *ngFor="let column of columns" [ngValue]="column">{{column}}</option>
  </select>
</div>

<div>
    defaultFields: {{ report.summaryFields.defaultFields | json }}
</div>

参见 this stackblitz一个演示。请注意，我使用 json 管道强制 View 在进行更改时更新插值。