11

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

在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() 方法？我已经尝试过了，但我似乎无法让它在我的场景中工作。

我知道它代表我缺乏理解。

任何帮助/建议将不胜感激。

提前致谢。

4

2 回答 2

9

我找到了一种更好的方法，它不必使用 @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 材质 6.4.7。

希望这可以帮助。

于 2019-01-18T09:41:16.087 回答
5

在组件初始化时创建新的 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();
 }
于 2019-01-16T17:42:22.863 回答