угловая двухсторонняя привязка в ячейке таблицы

Question

Мне нужно визуализировать таблицу, в которой каждая ячейка строки в i-м столбце (скажем, 2-й) является выпадающим списком выбора. И по умолчанию выбранное значение в этом выпадающем списке будет значением второго столбца в j-й строке из массива объектов, заполняющего мою таблицу. Это мой HTML

<tr *ngFor = 'let row of tableData'>
    <td>{{row.user_id}}</td>
    <td> 
        <select [(ngModel)]="row.auditor_id" (ngModelChange)="someFuncLaterDefined($event)">
            <option *ngFor = 'let a of auditors' [ngValue]="a.id">{{a.name}}</option> 
        </select>
    </td>
</tr>

А это мой файл ts / код внутри ngOnInit:

this.nodeapiservice.getAllAuditors().subscribe(
  data => {
    this.auditors = data; 
}) 
this.nodeapiservice.getAllUsers().subscribe(
  data => {
      this.tableData = data;  
}); 

Проблема в том, что поле выбора заполняется пустым, так как значение отображается по умолчанию. Когда я нажимаю на нее, я могу получить правильный список значений для выбора. И даже тогда, даже после того, как я выберу значение и закрою его, когда я нажму на него, чтобы снова появилось выпадающее меню, выбранное значение всегда является вариантом 1. Выбор данных полностью корректен - дает мне правильные данные в правом Формат - просто к вашему сведению. Все ответы предлагают использовать ngModel для двухсторонней привязки данных. Я уже использую это. Что мне нужно изменить, чтобы сделать эти два?

Answer 1

Вам необходимо установить row.auditor_id после получения данных из вашего API.

ngOnInit() {
  Observable.combineLatest(
    this.nodeapiservice.getAllAuditors(),
    this.nodeapiservice.getAllUsers()
  )
  .subscribe(data => {
    [this.tableData, this.auditors] = data;
    this.tableData.forEach((row, i) => {
      let j = i+1;
      if (j == this.auditors.length) {
        j = 0;
      }
      row.auditor_id = this.auditors[j].id;
    });
  });
}

https://stackblitz.com/edit/angular-pgavwk