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

时间:2019-05-03 08:06:09

标签: angular material-ui angular-material2

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

this.dataSource.data = updatedDataDource;

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

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

1 个答案:

答案 0 :(得分:5)

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

<script src="./src/thing1.js></script> <script src="./src/thing2.js></script> <script src="./src/thing3.js></script> ... <script src="./src/thing305.js></script> <script> var exScript1 = "test"; </script> <script> var exScript2 = "test"; </script> ... <script> var exScript302 = "test"; </script>

更改为

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

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