Angular 6 MatTable在1000行中的性能. [英] Angular 6 MatTable Performance in 1000 rows.

查看:93
本文介绍了Angular 6 MatTable在1000行中的性能.的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在项目中使用有角度的材料,并且在Mat-Table中使用每张表渲染1000个产品/行. 当将表的分页(我们使用后端分页)更改为1000行时,性能变得非常慢,我什至无法在文本框中编写内容.

I'm using angular material in my project and I'm using Mat-Table to render 1000 Product/row per table. When Change pagination (we use backend pagination) of table to 1000 rows the performance become very slow I even can't write in textboxes.

我试图调试该问题,因此将日志放在一个列模板上,以便了解渲染的工作原理.

I tried to debug the issue so I put logs on one column template so I can see how's render works.

即使将鼠标悬停在表头上,我也会看到所有行都将重新呈现. 是否有可能将变更检测控制为 ChangeDetectionStrategy.OnPush

I see it's Rerender all rows even if I hover on the table headers. Is there's any possibilities to control the change detection to be like ChangeDetectionStrategy.OnPush

推荐答案

我已经解决了这个问题,并且通过将表格包装在自定义(网格)组件中并将该组件的changeDetection控制为,当我想呈现更新时,我使用了ChangeDetectorRef.detectChanges()

I had solved this issue and i improved the performance by wrap the table in custom (grid) component and Control the changeDetection of the component to be ChangeDetectionStrategy.OnPush and when i want to render update i used ChangeDetectorRef.detectChanges()

这篇关于Angular 6 MatTable在1000行中的性能.的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆