我在项目中使用角度材质,并使用 Mat-Table 渲染每个表 1000 个产品/行。
当将表的分页(我们使用后端分页)更改为 1000 行时,性能变得非常慢,我什至无法在文本框中写入。
我尝试调试这个问题,所以我将日志放在一列模板上,这样我就可以看到渲染是如何工作的。
即使我将鼠标悬停在表标题上,我也会看到它会重新渲染所有行。
是否有可能将变化检测控制为
更改检测策略.OnPush
不确定这是否对您的情况有帮助,因为没有代码,但我们发现如果设置了大数据集,MatTable 加载速度非常慢before您设置数据源分页器。
例如 - 这需要几秒钟的时间来渲染......
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) 添加到您的可观察对象中。
无论如何,这可能对您的情况有帮助,也可能没有帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)