数据绑定不更新 w/ 嵌套 ngFor 循环

Question

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

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

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

数据绑定不更新 w/ 嵌套 ngFor 循环

Data Binding Not Updating w/ Nested ngFor Loops

data-binding

html-select

typescript

ngfor

angular