typescript - Angular materyal - ağaç görünümü - Maksimum çağrı yığını boyutu aşıldı

Angular Material TreeView kullanıyorum ama eğer dataSource 350'den fazla öğe içeriyorsa ERROR RangeError: Maximum call stack size exceeded alıyorum. Uykusuz gece :D

işte benim kodum: (çoğunlukla AngularMaterial örneklerinden alınmıştır)

<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;
  }
}

veri yapısı

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;
      }
}

Cevap #1

Bugün aynı sorunu yaşadım ve cevabımı burada bulabildim https://github.com/angular/material2/issues/11602.

İç içe geçmiş ağaç düğümleri ve daha büyük veri miktarlarıyla ilgili bazı sorunlar var. Ağacı düz bir ağaç olarak değiştirmek sorunu çözüyor. Angular Material dokümantasyonunda burada bulunan harika bir örnek var https://material.angular.io/components/tree/overview

veya stackblitz burada

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

Bunun yardımcı olup olmadığını bana söyle, eğer olmazsa bana söyle ve sana yardımcı olmaya çalışacağım.

Not: Düğümlerinizde herhangi bir özel özellik varsa, sadece dönüştürücü işlevi değiştirin.