Angular2 版本 6 中更新 MatTableDataSource 的正确方法

Question

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

在component.html

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

在component.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

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

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

可以使用ChangeDetectorRef。它正在寻找给定组件的变化。

 constructor(private changeDetectorRefs: ChangeDetectorRef) {}

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

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

Answer 2

我找到了一个更好的方法，它可以避免使用 @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();
  }

这是迄今为止我想出的最适合我的解决方案。

使用 Angular Material 6.4.7.

希望对您有所帮助。

Angular2 版本 6 中更新 MatTableDataSource 的正确方法

The correct method of updating a MatTableDataSource in Angular 2 version 6

angular

angular-material-6

angular-material-table