Angular移除MatTableDataSource中montoDonar为0行并刷新表格的方法

你直接在接口返回数据后先做一层过滤，把金额为0的条目筛掉再传给表格数据源就行，表格会自动跟着数据源刷新，不用额外写视图更新的代码。

修改后可直接运行的组件代码 #

export class DonacionListComponent implements OnInit {

  displayedColumns: string[] = ['idDonacion', 'usuario', 'montoDonar', 'fechaPlantacion', 'acciones'];
  dataSource : MatTableDataSource<Donacion>;
  
  constructor(private donacionService: DonacionService) { }

  ngOnInit(): void {
    this.getAllDonaciones();
  }


  getAllDonaciones(){
    this.donacionService.getAllDonaciones().subscribe((data:any)=>{
          // 过滤掉montoDonar等于0的记录
          const filteredList = data['body'].filter(donacion => donacion.montoDonar !== 0);
          this.dataSource = new MatTableDataSource(filteredList);     
        });
  }


  applyFilter(value: string) {
    this.dataSource.filter = value.trim().toLowerCase();
  }
  eliminar(id: number) {
    const ok = confirm('¿Estás seguro de eliminar la donacion?');
    if (ok) {
      this.donacionService.delete(id).subscribe(() => {
        this.getAllDonaciones();
      });
    }
  }
  
}

实现说明 #

• 过滤逻辑放在接口订阅回调里，不管是首次加载、删除数据后重拉列表，都会自动执行过滤，不会漏过0金额的行
• 用原生filter方法不会修改原始接口返回数据，如果你后续需要用到全量数据做统计，可以单独声明个变量存完整的data['body']，不影响传给表格的过滤后数据
• 原有的搜索过滤applyFilter、删除功能逻辑都不用改，完全兼容，删除操作后重走getAllDonaciones时会自动再次过滤，表格自动渲染最新结果

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