Angular Material Table删除记录后视图未刷新如何解决

根因 #

Angular Material 的 MatTable 组件默认基于数组引用变更触发重渲染。你使用的 splice() 方法属于数组原地修改操作，数组的内存引用地址没有发生变化，因此 Angular 变更检测器不会感知到数据更新，表格也就不会同步刷新。

解决方法 #

以下三种方案任选其一即可：

方案1：替换数组引用（最推荐，符合Angular变更检测规范） #

删除元素后通过展开运算符生成新数组，重新赋值给 dataSource 的 data 属性，主动触发变更检测：

// 原有删除逻辑不变
this.dataSource.data.splice(i, 1);
// 新增代码：生成新数组替换原引用
this.dataSource.data = [...this.dataSource.data];

方案2：强制表格重渲染 #

先在组件内获取 MatTable 实例，删除完成后调用刷新方法：

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

export class YourComponent {
  // 类内部声明获取表格实例
  @ViewChild(MatTable) matTable!: MatTable<any>;

  deleteAlert(id: number, i: number) {
    // 原有删除逻辑/接口调用逻辑
    this.dataSource.data.splice(i, 1);
    // 调用方法强制刷新表格
    this.matTable.renderRows();
  }
}

方案3：调用数据源内置更新方法（适合快速实现，属于内部API，可能随版本变动） #

this.dataSource.data.splice(i, 1);
this.dataSource._updateChangeSubscription();

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