Angular mat table删除功能失效无法删除指定行，需如何调整代码？

根本原因 #

你修改了存储原始数据的dataArray，但没有同步更新MatTableDataSource绑定的数据源，Angular Material Table只会响应dataSource.data的变化，不会主动监听你自定义的dataArray变量，所以表格不会刷新。

需要调整的代码 #

1. 修改deleteRowData方法 #

在过滤完dataArray后，将新值同步赋值给dataSource.data即可触发表格刷新：

deleteRowData(row_obj: { id: number; }){
  this.dataArray = this.dataArray.filter((value : any)=>{
    return value.id != row_obj.id;
  });
  // 新增这一行，同步更新数据源触发表格刷新
  this.dataSource.data = this.dataArray;
}

额外优化建议 #

• 确认接口返回的用户数据中确实存在id字段，如果你用于唯一标识行的字段名不是id，需要对应修改过滤判断条件
• 建议给dataArray定义明确的类型，避免使用any降低代码可维护性
• 新增ngOnDestroy生命周期钩子，在组件销毁时取消subs里的订阅，避免内存泄漏：

ngOnDestroy() {
  this.subs.unsubscribe();
}

• 如果删除行后需要重置分页器状态，可以在更新完数据源后新增this.dataSource.paginator?.firstPage();

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