Angular中[(NgModel)]绑定表格单字段修改随机影响同行字段问题

嘿，我帮你排查了这个问题，其实是Angular变更检测和列表渲染机制导致的，咱们一步步来搞定它：

问题根源 #

当你用*ngFor渲染二维数组时，Angular默认靠对象引用来识别列表项。如果没指定trackBy函数，修改table[i][j]时，Angular可能没法精准识别只是单个字段变化，反而会重新渲染整行的所有输入框，这就导致了同行其他字段出现异常。另外你的input标签里还有两处冗余代码：重复的type="text"和没必要的contenteditable="true"（input本身就是可编辑的），这些虽然不是核心问题，但也得清理掉。

解决方案 #

我们可以通过添加trackBy函数，让Angular准确跟踪每个列表项的身份，避免不必要的整行重渲染：

1. 在组件类中添加trackBy函数

打开你的组件.ts文件，添加两个分别跟踪行和列索引的trackBy函数：

trackByRow(index: number): number {
  return index;
}

trackByField(index: number): number {
  return index;
}

2. 修改模板代码

把trackBy函数绑定到对应的*ngFor指令上，同时清理冗余属性：

<table>
  <tr *ngFor="let row of table; index as i; trackBy: trackByRow">
    <td *ngFor="let field of row; index as j; trackBy: trackByField">
      <input type="text" [(ngModel)]="table[i][j]" maxlength="1" />
    </td>
  </tr>
</table>

3. 确保数组初始化正确

还要确认你的二维数组是正确初始化的，每个元素都是独立的字符串，比如：

// 示例初始化，可根据实际需求调整行数和列数
table: string[][] = [
  ['', '', ''],
  ['', '', ''],
  ['', '', '']
];

原理说明 #

trackBy函数告诉Angular用索引（或者你指定的唯一标识）来识别每个列表项，当某个字段更新时，Angular只会重新渲染对应的那个输入框，不会动整行的其他元素，这样就彻底解决了修改单个字段影响同行其他字段的问题。

内容的提问来源于stack exchange，提问作者David