使用 [(ngModel)] 与 ngFor 的 2 种方式数据绑定，数组不会更新行的值

Question

我建立了这个表格：

这是 html 代码：

<table class="table table-hover table-bordered table-striped table-highlight">
  <thead>
    <tr>
      <th *ngFor="let cell of tableData2.headerRow">{{ cell }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableData2.dataRows">
      <td *ngFor="let cell of row">
        <input type="text" class="form-control border-input" [(ngModel)]="cell" name="cell" />
      </td>
    </tr>
  </tbody>
</table>

这是相关的打字稿代码：

declare interface TableData {
  headerRow: string[];
  dataRows: string[][];
}
public tableData2: TableData;
this.tableData2 = {
  headerRow: ['Version', 'Approbateur(nom+fonction)', 'Principales remarques', 'Date d\'approbation'],
  dataRows: [
    ['ahmed', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
    ['', '', '', ''],
  ]
};

您可能已经注意到，双向数据绑定在 "one direction" 中有效，确实会显示值 "ahmed"。
但是，当我像这样更改 table 中的输入值时：
然后我控制台记录 tableData2 变量：
您可能会注意到，新值 SAM 不会在 tabledata 变量中更新。即，双向数据绑定不起作用，我无法从 table.
检索值我做错了什么？

Answer 1

2-way binding doesn't work on array value, it needs some object to update

所以第一个变化是let i = index;和[(ngModel)]="row[i]"：

<td *ngFor="let cell of row; 
        let i = index;
        trackBy: customTrackBy
        ">
    <input type="text" class="form-control border-input" [(ngModel)]="row[i]" name="cell" />
</td>

第二次更改：（问题在演示中显示）

// Your list will be reloaded again by ngFor when you change one field value, 
// and it will lose the focus. 
// You can add a trackBy to determine if the list must or must not be reloaded. The code below seems to solve the issue:

customTrackBy(index: number, obj: any): any {
    return index;
}

WORKING DEMO（有解决方案+问题）

Answer 2

我不确定是否可以通过这种方式绑定到原始类型。如果您可以使该行成为一个对象并将输入绑定到该对象的变量之一，我知道它有效，请尝试一下:)

使用 [(ngModel)] 与 ngFor 的 2 种方式数据绑定，数组不会更新行的值

Using [(ngModel)] 2 way data binding with ngFor , array doesn't update the values of the rows

angular

angular-ngmodel

ngmodel

angular2-ngmodel