Question

我正在使用Angular Material TreeView，但是如果dataSource具有 350多个项目，那么我将收到ERROR 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

的角材料文档中可以找到一个很好的例子。

或此处的堆叠闪电战

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

让我知道是否有帮助，如果没有帮助，我会尽力帮助您。

P.S。如果您的节点上有任何自定义属性，只需修改转换器功能即可。

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

1 个答案: