Угловой материал - вид дерева - превышен максимальный размер стека вызовов - PullRequest
Новая
       10

Угловой материал - вид дерева - превышен максимальный размер стека вызовов

0 голосов
/ 17 января 2019

Я использую 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;
      }
}

1 Ответ

0 голосов
/ 31 января 2019

У меня была такая же проблема сегодня, и я смог найти ответ здесь 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. Если у вас есть какие-либо пользовательские свойства на ваших узлах, просто измените функцию преобразователя.

...