Angular Material对话框关闭后表格行数据未更新如何解决

这个问题我之前也碰到过，核心原因是MatTableDataSource不会自动检测数组内部元素的变化——你直接修改this.usersData.data[i]的时候，数组的引用并没有改变，所以表格不知道数据已经更新了。下面给你两种靠谱的解决方法：

方法1：更新数组引用（推荐） #

通过创建一个新的数组来替换原有的data，这样Angular的变更检测就能捕捉到变化，自动更新表格：

dialogRef.afterClosed().subscribe(result => {
  // 方式A：用扩展运算符创建新数组
  this.usersData.data[i] = result;
  this.usersData.data = [...this.usersData.data];

  // 或者方式B：用map方法生成新数组（更简洁）
  // this.usersData.data = this.usersData.data.map((user, idx) => idx === i ? result : user);
});

这种方法不需要额外的依赖，完全利用Angular的变更检测机制，适合大多数场景。

方法2：手动触发表格渲染 #

如果你不想改变数组引用，可以通过MatTable的renderRows()方法手动通知表格刷新行数据：

首先，在组件类中添加ViewChild获取表格实例：

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

// ...

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

然后在关闭模态框的回调里调用renderRows()：

dialogRef.afterClosed().subscribe(result => {
  this.usersData.data[i] = result;
  this.userTable.renderRows(); // 手动触发表格行渲染
});

两种方法都能解决你的问题，方法1更符合Angular的变更检测逻辑，方法2则更直接，适合需要保留原数组引用的场景。

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