Question

我需要渲染一个表，其中第i个（比如第二个）列中的每个行单元格都是一个选择下拉列表。默认情况下，该选择下拉列表中的选定值将是填充我的表的对象数组中第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.数据提取完全正确 - 在右侧给我正确的数据格式 - 只是fyi。所有答案都建议使用ngModel进行双向数据绑定。我已经在使用它了。做这两项需要改变什么？

Answer 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

表格单元格中的角度双向绑定

1 个答案: