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

问题描述

我正在尝试使用 Angular 材料来可视化一棵树。树是从以下对象结构构建的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 材质树来解决这个问题？

标签： angulartreeangular-materialangular-cdk

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

问题描述

解决方案

推荐阅读