Question

我有一个带有父级，子级和孙级的倾斜垫树。在点击孩子时，我在其中添加了孙子。但是孙子拥有高达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中尝试过的操作：My code

我注意到在这种情况下虚拟滚动将是最佳解决方案。我看到了一个示例：Refernce

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

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

Answer 1

要虚拟化树，请将层次结构数据映射到平面列表，以使每个项目都包括原始数据和层次结构信息。

例如，此数据

    [{ 
        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

如何在材料树的子级上实现虚拟滚动

1 个答案: