0

我有一个具有父级、子级和孙级的角垫树。在点击孩子时，我在其中添加孙子。但是孙子拥有高达 4k 记录的大量数据。这使树变得非常缓慢。我的代码如下

<div *ngIf="isGrandChildLoaded"><mat-spinner></mat-spinner></div>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
    <!-- use a disabled button to provide padding for tree leaf -->
    <button mat-icon-button disabled></button>
    {{node.name}}
  </mat-tree-node>
  <!-- This is the tree node template for expandable nodes -->
  <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
    <button mat-icon-button matTreeNodeToggle
            [attr.aria-label]="'toggle ' + node.name">
      <mat-icon class="mat-icon-rtl-mirror" (click)="clickTreeNode(node)">
        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
      </mat-icon>
    </button>
    {{node.name}}
  </mat-tree-node>
</mat-tree>

请注意我在 stackblitz 中尝试过的内容：我的代码

我已经注意到虚拟滚动将是这种情况下的最佳解决方案。我看到了一个例子：参考

但在示例中，它具有virtual-scroll完整的数据源的整个树级别。

如何一次添加 10 个元素的孙级虚拟滚动。所以它不会冻结 DOM 和 Tree。请指导我...

4

1 回答 1

0

要虚拟化一棵树，请将分层数据映射到一个平面列表，以便每个项目都包含原始数据和分层信息。

这个数据，例如，

    [{ 
        name: 'item 1', 
        children: [{ 
            name: 'sub item 1', 
            children: [{ 
                name: 'grandchild 1', 
                children: [] 
            }]
        }]
    }]

会成为

    [
        { name: 'item 1', depth: 0, parent: null },
        { name: 'sub item 1', depth: 1, parent: /*ref to 'item 1'*/ },
        { name: 'grandchild 1', depth: 2, parent: /*ref to 'sub item 1'*/ }
    ]

随着数据扁平化，它可以像任何扁平列表一样被虚拟化。使用深度来缩进元素，并使用parent来根据父展开状态切换列表中包含的子项。

另外，这是我刚刚发布的基于角度的实现。https://github.com/gjcampbell/ooffice/tree/master/projects/of-tree

于 2020-01-04T17:47:51.277 回答