Angular Mat 树重新渲染性能问题需要太多时间

Question

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

this.dataSource.data = updatedDataDource;

重新渲染需要超过 15 秒，这是不可接受的。

有什么方法可以让我只重新渲染那个节点和来自 api 的关联子节点（我的意思是部分渲染）。如果有人有同样的问题，请帮助。

Answer 1

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

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

将其更改为

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

这将提高树选择的性能。这样，在初始加载时，只需在 DOM 中呈现根节点。过滤时，必须插入与过滤器查询匹配的子节点，这可能代价高昂。