数据绑定未更新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

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

<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管道强制视图在更改时更新插值。