1000 行中的 Angular 6 MatTable 性能

Question

我在我的项目中使用 Angular Material ，并且我使用 Mat-Table 来渲染每个表 1000 个产品/行。当将表的分页(我们使用后端分页)更改为 1000 行时，性能变得非常慢，我什至无法在文本框中书写。

我试图调试这个问题，所以我将日志放在一个列模板上，这样我就可以看到渲染是如何工作的。

即使我将鼠标悬停在表格标题上，我也看到它重新渲染所有行。是否有可能控制变化检测就像ChangeDetectionStrategy.OnPush

Answer 1

不确定这是否对您的情况有帮助，因为没有代码，但我们发现如果在设置数据源分页器之前设置了大型数据集，MatTable 的加载速度会非常慢。

例如 - 这需要几秒钟来呈现...

dataSource: MatTableDataSource<LocationItem> = new MatTableDataSource();
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  this.dataSource.data = [GetLargeDataSet];
}

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}

...但这很快

ngOnInit() {
  // data loaded after view init 
}

ngAfterViewInit() {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;

  /* now it's okay to set large data source... */
  this.dataSource.data = [GetLargeDataSet];
}

顺便说一下，我们只是在第二次访问组件时才发现这个问题，因为来自服务器的大型数据集正在缓存中，并且在第二次访问组件时立即可用。如果您想将该代码保留在 ngOnInit 函数中，另一种选择是将 .delay(100) 添加到您的可观察对象中。

无论如何，这可能对您的情况有帮助，也可能没有帮助。