Angular Material Mat Table的dataSource变化时不会自动刷新

云英才
2023-12-01

Mat Table的dataSource 改变时,mat-table 不会自动更新,但是mat expansion panel 可以自动侦测数据源变化。

解决办法是,可以给table一个#名字 用ViewChild()获取这个table 然后手动 table.renderRows() 方法来刷新table。

<table mat-table #table [dataSource]="dataSource" multiTemplateDataRows>
@ViewChild(MatTable) table: MatTable<any>;
dataSource:MatTableDataSource<ModbusNode>;
deleteNode(node: ModbusNode){
    this.mc.alterDeviceNode(HttpBehaviors.DELETE,[node]).subscribe(
      ()=> {
        alert(`Delete Node: ${node.ValName} Successfully!\n\n
        成功删除信号点:${node.ValName}!`);

        this.dataSource.data.splice(this.dataSource.data.findIndex(item=>
          item.Uuid == node.Uuid),1);
        
        // mat-table does not support detecting datasource change, have to manually render rows
        this.table.renderRows();
      },
      (err)=> alert(`Failure: cannot delete node: ${node.ValName}\n\n
      删除信号点:${node.ValName}失败!`)
    );
  }

 类似资料: