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

问题描述

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

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.

推荐答案

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

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

改成

<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屋！