数据频繁更新时angular material表格行点击事件失效如何解决

该问题核心是高频数据更新触发表格全量重绘导致：

1. 点击事件触发时，对应的行DOM元素正被销毁重建，事件回调未正常执行
2. 即使事件执行完成，重绘后之前的选中状态也会丢失

1. 用trackBy优化表格重绘逻辑（最优解） #

Angular Material表格默认会在数据源数组引用变化时全量重绘所有行，添加trackBy可以让框架只更新实际发生变化的行，未变化的行DOM会被保留，不会销毁重建。
首先在组件类中定义trackBy函数，返回每行的唯一标识：

// 把YourRowDataType替换为你实际的行数据类型
trackByRowId(index: number, row: YourRowDataType): number | string {
  return row.id; // 替换为你行数据里的唯一标识字段，比如id、uuid等
}

然后在模板的mat-table标签上绑定该函数：

<table mat-table [dataSource]="dataSource" [trackBy]="trackByRowId">
  <!-- 其余列配置保持不变 -->
</table>

2. 用唯一标识持久化选中状态 #

不要依赖行对象引用、DOM引用来判断高亮状态，改为存储选中行的唯一标识，重绘后会自动匹配状态：
组件内定义选中状态变量：

selectedRowId: number | string | null = null;

onRowClick(row: YourRowDataType) {
  this.selectedRowId = row.id;
}

模板里绑定高亮类：

<tr mat-row 
  *matRowDef="let row; columns: displayedColumns;"
  (click)="onRowClick(row)"
  [class.highlight]="row.id === selectedRowId"
>
</tr>

配套的高亮样式示例：

.highlight {
  background-color: rgba(0, 123, 255, 0.15);
}

3. 增量更新数据源（可选优化） #

如果数据更新只是修改部分行的字段，不需要全量替换数据源数组，改为增量更新可以进一步减少重绘范围：

// 不要直接全量替换：this.dataSource.data = newDataArray;
// 改为增量更新
newDataArray.forEach(newRow => {
  const existRow = this.dataSource.data.find(item => item.id === newRow.id);
  if (existRow) {
    Object.assign(existRow, newRow);
  } else {
    this.dataSource.data.push(newRow);
  }
})
// 触发表格变更检测
this.dataSource._updateChangeSubscription();

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