Angular Mat树重新渲染性能问题需要太多时间 [英] Angular Mat tree re-render performance issue takes too much time

问题描述

我正在对具有大约3k记录的API调用子项的子节点中的非常大的数据集使用mat-tree，我正在做的是通过在数据源下添加来自API的子项并通过以下方式重新渲染来更新数据源

I am using mat-tree with very big data sets in child nodes on API call child having around 3k records and what I am doing is I'm updating the dataSource by adding the children from API under the dataSource and re rendering by

this.dataSource.data = updatedDataDource;

重新渲染需要15秒钟以上，因此无法接受.

It is taking more than 15 seconds to re render and it is not acceptable.

有什么办法可以使我只能从api重新渲染该节点和关联的子代(我的意思是部分渲染).如果有任何相同的问题，请提供帮助.

Is there any way so that I can re render only that node and that associated children from api(I mean kind of partial rendering). Please help if any one have same issue.

推荐答案

在子树而不是class.sub-tree-invisible上使用* ngIf进行树选择.

Use *ngIf on subtrees rather than class.sub-tree-invisible for tree-select.

<ul [class.tree-invisible]="!treeControl.isExpanded(node)">

将其更改为

<ul *ngif="treeControl.isExpanded(node)">

这将提高树选择的性能.这样，在初始加载时，仅根节点将必须在DOM中呈现.过滤后，必须插入与过滤查询匹配的子节点，这可能会很昂贵.

This will increase performance for the tree-select. This way, upon initial load, only the root nodes will have to be rendered in the DOM. Upon filtering, child nodes will have to be inserted that match the filter query which could be costly.

这篇关于Angular Mat树重新渲染性能问题需要太多时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！