angular - 使用对象数组中的 Angular Material 树时超出最大调用堆栈大小

Question

我正在尝试用 Angular Material 可视化一棵树。该树是根据以下 Tree 对象结构构建的:

export interface Tree {
    Name: string;
    KeyName: string;
    Typ: number;
    Children?: Tree[];
}

因为 mat-tree 期望对象数组作为参数 dataSource 的输入，所以我创建了一个只有一个元素的 Tree 数组，它包含整个树结构/数据。树被正确解析/查看，直到我在控制台中收到以下消息。

Firefox 说如下:

message: "1 errors occurred during unsubscription:\n1) InternalError: too much recursion"

name: "UnsubscriptionError"

Chrome 显示如下:

Error occurred:  Maximum call stack size exceeded

我的树组件:

const GetChildren = (node: Tree) => of(node.Children);
const TC = new NestedTreeControl(GetChildren);

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.scss'],
})
export class TreeComponent implements OnInit {
  tc = TC;

  tree: Tree[];

  constructor(private apiService: ApiService) {}

  ngOnInit(): void {
    this.apiService.getTree().subscribe(
    tree => this.tree = tree
    );
  }

  hasChild(_: number, node: Tree) {
    return node.Children != null && node.Children.length > 0;
  }
}

我的模板看起来像:

<mat-tree [dataSource]="tree" [treeControl]="tc">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
  <li>
    <div>
      <button mat-icon-button disabled>
        <mat-icon>
          remove
        </mat-icon>
      </button>
      {{node.Name}} - {{node.KeyName}}
    </div>
  </li>
</mat-tree-node>

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
  <li>
    <div class="mat-tree-node">
      <button mat-icon-button matTreeNodeToggle>
        <mat-icon>
          {{tc.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button> {{node.Name}}
    </div>
    <ul [hidden]="!tc.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
    </ul>
  </li>
</mat-nested-tree-node>

如前所述，在错误发生的某个点之前，树会被正确可视化。树中所有节点和叶子的数量约为1625。

如何继续使用 Angular Material 树来解决这个问题？

Answer 1

答案来自github上的以下问题link .

对于大量数据，您必须使用 flat-tree 而不是 nested-tree。

很高兴知道，因为它在官方 Material 页面上无处记录