Angular Material Dialog关闭后如何更新表格行数据？

我之前也碰到过完全一样的问题！Angular Material的MatTableDataSource不会自动监测数组内部元素的变更——你直接修改this.usersData.data[i] = result只是改了数组里的单个元素，但数据源没收到更新通知，所以表格压根没刷新。下面给你几个亲测有效的解决方案：

方案1：手动触发数据源的更新订阅 #

这个方法简单直接，适合快速修复。MatTableDataSource有个内部方法_updateChangeSubscription()，调用它就能让数据源重新订阅数据变化，从而通知表格更新。修改你的代码：

dialogRef.afterClosed().subscribe(result => {
  this.usersData.data[i] = result;
  this.usersData._updateChangeSubscription(); // 手动触发表格更新
});

虽然这个方法名以下划线开头（看起来像私有方法），但在Angular Material 11版本里完全可以正常使用，我当时就是这么临时解决的。

方案2：替换整个data数组（推荐） #

这是更符合Angular变更检测逻辑的做法。因为Angular对数组的引用变化更敏感，我们可以复制原数组、修改对应元素后再重新赋值，这样变更检测会自动触发表格更新：

dialogRef.afterClosed().subscribe(result => {
  // 复制原数组，避免直接修改原引用
  const updatedUsers = [...this.usersData.data];
  updatedUsers[i] = result;
  // 重新赋值data，触发变更检测
  this.usersData.data = updatedUsers;
});

这个方法不依赖任何内部私有方法，兼容性和稳定性更好，是我现在首选的方式。

方案3：强制表格重新渲染行 #

如果你在组件里有表格的引用，可以直接调用表格的renderRows()方法强制刷新：
首先在组件类里添加表格的ViewChild引用：

import { MatTable } from '@angular/material/table';

// ...

@ViewChild(MatTable) userTable: MatTable<any>;

然后在关闭对话框后调用：

dialogRef.afterClosed().subscribe(result => {
  this.usersData.data[i] = result;
  this.userTable.renderRows(); // 强制表格重新渲染所有行
});

为什么原来的代码不生效？ #

MatTableDataSource内部是通过订阅data属性的变化来更新表格的，但直接修改数组元素时，数组的引用并没有改变，所以数据源的订阅不会触发，表格自然不会同步更新。只有当data被重新赋值（引用变化），或者手动触发更新时，表格才会刷新。

内容的提问来源于stack exchange，提问作者j.ss