表格单元格中的角度 2 向绑定答案

【问题标题】：angular 2-way binding in table cell表格单元格中的角度 2 向绑定
【发布时间】：2018-04-27 14:58:57
【问题描述】：

我需要渲染一个表格，其中第 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 进行双向数据绑定。我已经在使用它了。我需要改变什么来做这两个？

【问题讨论】：

你能在 stackBlitz 上重现类似的问题并分享吗？
我想我可以实现你想要做的，看看stackblitz.com/edit/angular-hqk7lv
谢谢。我能够做我想做的事。我一有空就会看看你的解决方案。

标签： angular typescript

【解决方案1】：

您需要在从 API 检索数据后设置row.auditor_id。

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

【讨论】：