如何在通过mat-dialog删除项后刷新mat-table的数据源

问题原因 #

这个问题是Angular Material mat-table 的默认更新机制导致的：

• mat-table 只有在数据源的数组引用发生变化时，才会自动触发重渲染。
• 你直接用 splice 方法修改数组，是在原数组的基础上修改，数组的引用没有变化。
• 直接在行内点击删除按钮时，刚好触发了组件的变更检测周期，所以表格碰巧刷新了；而 mat-dialog 的 afterClosed 回调属于异步事件，触发时没有同步触发组件的变更检测，加上数组引用没变，所以表格不会刷新。

解决方案 #

方案1：替换整个数据源数组（最稳妥，推荐） #

修改你的delete方法，删除元素后生成新数组赋值给dataSource.data，主动触发引用变化：

public delete(element) {
  this.myService.delete(element.ID).then(() => {
    // 过滤掉要删除的元素，生成新数组触发引用更新
    this.dataSource.data = this.dataSource.data.filter(q => q.ID !== element.ID);
  })
}

方案2：手动调用mat-table渲染方法 #

如果需要保留splice的写法，可以手动触发表格重绘：
首先在模板中给mat-table添加模板引用：

<mat-table #table [dataSource]="dataSource">
  <!-- 其余表格列代码 -->
</mat-table>

然后在TS文件中获取表格实例，删除后调用渲染方法：

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

export class YourComponent {
  @ViewChild(MatTable) table: MatTable<any>;

  public delete(element) {
    this.myService.delete(element.ID).then(() => {
      const index = this.dataSource.data.findIndex(q => q.ID == element.ID);
      this.dataSource.data.splice(index, 1);
      // 手动触发表格重绘
      this.table.renderRows();
    })
  }
}

方案3：手动触发变更检测 #

也可以注入变更检测器，主动通知组件更新视图：

import { ChangeDetectorRef } from '@angular/core';

export class YourComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  public delete(element) {
    this.myService.delete(element.ID).then(() => {
      const index = this.dataSource.data.findIndex(q => q.ID == element.ID);
      this.dataSource.data.splice(index, 1);
      // 手动触发变更检测
      this.cdr.detectChanges();
    })
  }
}

内容的提问来源于stack exchange，提问作者Gerard Ferrer Birbe