Question

我有一个清单，该清单使用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（）方法？我已经尝试过了，但似乎无法使其在我的情况下正常工作。

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

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

谢谢。

Answer 1

在组件初始化一次创建一个新的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 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();
  }

这是迄今为止我提出的最有效的解决方案。

使用角材料6.4.7。

希望这会有所帮助。

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

2 个答案: