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

问题描述

我在我的项目中使用了有角度的材料，并且我正在使用 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组件是 ChangeDetectionStrategy.OnPush 并且当我想呈现更新时，我使用了 ChangeDetectorRef.detectChanges()

I had solved this issue and I improved the performance by wrapping 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()

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