Question

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

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

*。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管道来强制视图更新插值。

带有嵌套ngFor循环的数据绑定未更新

1 个答案: