Angular - <td> 上的（模糊）事件被触发并更新相邻单元格中的值

Question

我使用的是 Angular 8，我创建了一个二维数组（元素），然后动态生成了一个带有 2 个 *ngFor 循环的 html 表。

<table>
  <tr *ngFor="let el of elements, let row = index">
    <td *ngFor="let e of el, let col = index" [attr.r] = "row" [attr.c] = "col" contenteditable="true" (blur)="changed($event)">{{ e }}</td>
  </tr>
</table>

我的表格单元格是可编辑的“td”元素，我使用自定义属性“r”和“c”设置行号和列号。

当我更改二维数组中的单元格时，单元格中的值会正确更新。

然后我添加了“(blur)”事件来检测“td”的变化。该事件按预期触发，但在尝试根据更新更新数组中的值时出现奇怪的行为。

我的 changed() 函数如下：

  changed(event) {
    console.log(event);
    let td = (event['target']) as HTMLTableDataCellElement;
    console.log(td);
    const row = td.getAttribute('r');
    const col = td.getAttribute('c');
    console.log('r: ' + row);
    console.log('c: ' + col);
    console.log('value: ' + td.innerHTML);
    this.elements[row][col] = td.innerHTML;
    console.log('elements[1][1]: ' + this.elements[1][1]);
    console.log('elements[1][2] ' + this.elements[1][2]);
    console.log('elements[2][1]: ' + this.elements[2][1]);
  }

我的表格如下所示

然后我在单元格“A1”中输入一个值（所以我的数组的元素1），然后单击另一个单元格（不管是哪个）以触发“onBlur()”事件

在事件触发的函数中，我将输入的值写回数组。后台的数组得到了正确的值，但是我输入的值被复制到右边的下一个单元格中。

我在“changed()”中添加了几个 console.log，我得到了一些非常奇怪的值。

当我打印“td”时，它显示 c="2"，但是当我查询下一行的属性时，我得到 c="1"。 后端的数组似乎正确更新为 [1][1] = 1 和 [1][2] = 0

我注意到该问题仅在第一次更改单元格时发生。如果我更改 A1，B1 将具有相同的值。但是如果我再次更改 A1，问题将不会再次发生。

我在这个 stackblitz 中重现了这个问题：

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

我也尝试过使用“focusout”事件，但我得到了相同的行为。如果有更好/更简单的方法来实现双向数据绑定，请不要犹豫，为我指出另一个方向。

Answer 1

我想这只是 Angular 更改检测机制无法区分所有绑定。所以需要提供trackBy函数：

<table>
  <tr *ngFor="let el of elements, let row = index">
    <td *ngFor="let e of el, let col = index; trackBy: trackByIndex(row, col)" [attr.r] = "row" [attr.c] = "col" contenteditable="true" (blur)="changed($event)">{{ e }}</td>
  </tr>
</table>

以及功能：

export class AppComponent  {

  trackByIndex(row, col) {
    return () => `${row}:${col}`
  }

}

这是一个工作示例的链接：https://stackblitz.com/edit/angular-maggnl