角度材料 - 树视图 - 超出最大调用堆栈大小答案

【问题标题】：Angular material - treeview - Maximum call stack size exceeded角度材料 - 树视图 - 超出最大调用堆栈大小
【发布时间】：2019-06-11 21:42:36
【问题描述】：

我正在使用 Angular Material TreeView，但如果 dataSource 有 超过 350 个项目，那么我将收到 ERROR RangeError: Maximum call stack size exceeded。不眠之夜：D

这是我的代码：（主要取自 AngularMaterial 示例）

<mat-tree [dataSource]="data" [treeControl]="treeControl" #tree>
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    {{node[textField]}}
  </mat-tree-node>
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChildren">
    <li>
      <app-icon matTreeNodeToggle [name]="treeControl.isExpanded(node) ? 'chevron_down' : 'chevron_right'"></app-icon>
      {{node[textField]}}
      <ul [class.hidden]="!treeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>



export class TreeViewComponent implements OnInit {
  @Input() data: any[];
  @Input() textField: string;
  @Input() childrenField: string;

  treeControl: NestedTreeControl<any>;
  treeDataSource: MatTreeNestedDataSource<any>;


  constructor() {
    this.treeControl = new NestedTreeControl<any>(this.makeGetChildrenFunction());
    this.treeDataSource = new MatTreeNestedDataSource();
  }

  hasChildren = (_: number, node: any) => {
    return node[this.childrenField] && node[this.childrenField].length > 0;
  }

  private makeGetChildrenFunction() {
    return node => of(node[this.childrenField]);
  }

  ngOnInit(): void {
    this.treeDataSource.data = this.data;
  }
}

数据结构

export class TreeViewPreviewComponent {

    treeViewData: any[];

    constructor() {
        this.treeViewData = [ { text: 'Root', items: this.createRandomData(1000) } ];
      }

      private createRandomData(count: number): Array<any> {
        const result = Array(count).fill({}).map((_, index) => ({
          text: 'Item' + index,
          items: [ { text: 'SubItem' + index, items: null } ]
        })
        );
        return result;
      }
}

【问题讨论】：

标签： angular typescript angular-material treeview

【解决方案1】：

我今天遇到了同样的问题，我可以在这里找到答案https://github.com/angular/material2/issues/11602。

嵌套树节点和大量数据存在一些问题。将树更改为扁平树可以解决此问题。有一个很好的例子可以在这里的角度材料文档中找到https://material.angular.io/components/tree/overview

或在这里堆叠闪电战

https://stackblitz.com/angular/bbrlnqbyxoq?file=app%2Ftree-flat-overview-example.ts

如果这有帮助，请告诉我，如果没有帮助，请告诉我，我会尽力帮助您。

附：如果您的节点上有任何自定义属性，只需修改转换器函数即可。

【讨论】：