在 Angular 2 版本 6 中更新 MatTableDataSource 的正确方法

Question

我有一个使用 mat-table 组件的列表，该组件由 MatTableDataSource 提供。

在component.html中

<table mat-table [dataSource]="dataSource" matSort>

在组件.ts中

dataSource = new MatTableDataSource();

当我单击删除项目时，在服务器成功回调时，我通过重新实例化 MatTableDataSource(this.resources) 来更新列表以反映新结果集，并像这样传入新结果集。这确实有效...

this.PHService.getResources().subscribe(resources => {
  this.resources = resources;
  this.dataSource = new MatTableDataSource(this.resources);
  this.dataSource.sort = this.sort;
});

然而，尽管这有效，但我觉得这是错误的。

我读过一些文章说我必须扩展数据源？并调用 renderRows() 方法？我已经尝试过这个，但似乎无法让它在我的场景中工作。

我知道这是我缺乏理解。

Answer 1

我找到了一种更好的方法，可以省去使用 @ViewChild 属性装饰器注入 ChangeDetectorRefs 服务的麻烦。

以下是代码示例：

@ViewChild(MatTable) table: MatTable<any>;

然后只需调用该属性装饰器上的 renderRows() 方法，如下所示：

  refresh(): void{
    this.service.method().subscribe(resources => {
      this.dataSource.data = resources; 
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    });
    this.table.renderRows();
  }

这是我想出的最好的解决方案，到目前为止对我来说有效。

使用角度材质 6.4.7.

希望这有帮助。

Answer 2

在组件初始化时创建新的 MatTableDataSource 对象，然后添加传入 dataSource.data 的数组

dataSource.data 是应由表呈现的数据数组，其中每个对象代表一行，因此您不必在每次更改时创建新的对象实例。

可以使用ChangeDetectorRef。它正在寻找给定组件中的更改。

 constructor(private changeDetectorRefs: ChangeDetectorRef) {}

 refresh(){
  this.PHService.getResources().subscribe(resources => {

     this.dataSource.data = resources;
     this.dataSource.sort = this.sort;
  });
    this.changeDetectorRefs.detectChanges();
 }

Answer 3

this.dataSource.data = [];
this.dataSource = new MatTableDataSource(this.commonTableData);