Связывание данных не обновляется с вложенными циклами 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>

См. этот стекаблик для демонстрации.Обратите внимание, что я использую трубу json, чтобы заставить представление обновлять интерполяцию при внесении изменений.