角材料 - 树视图 - 超过最大调用堆栈大小

Question

我采用了棱角分明材料的TreeView，但如果数据源有超过350项话，我会得到错误的RangeError：最大调用堆栈大小超出。无眠之夜：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;
      }
}

Answer 1

今天我有同样的问题，我能够在这里找到https://github.com/angular/material2/issues/11602我的答案。

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

或stackblitz这里

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

让我知道这会有所帮助，如果不是让我知道，我会尽力帮助你。

附：如果您的节点上的任何自定义属性只是修改变压功能。