Превышен максимальный размер стека вызовов при использовании дерева угловых материалов из массива объектов - PullRequest
Новая
       32

Превышен максимальный размер стека вызовов при использовании дерева угловых материалов из массива объектов

0 голосов
/ 11 февраля 2019

Я пытаюсь визуализировать дерево с угловым материалом.Дерево построено из следующей структуры объектов Tree: 

export interface Tree {
    Name: string;
    KeyName: string;
    Typ: number;
    Children?: Tree[];
}

Поскольку mat-tree ожидает массив объектов в качестве входных данных в параметре dataSource, я создал массив дерева только с однимэлемент, который содержит всю древовидную структуру / данные.Дерево анализируется / просматривается правильно до некоторой точки, где я получаю следующее сообщение в консоли.

Firefox говорит следующее: 

message: "1 errors occurred during unsubscription:\n1) InternalError: too much recursion"

name: "UnsubscriptionError"

Chrome говорит следующее: 

Error occurred:  Maximum call stack size exceeded

Мой компонент дерева: 

const GetChildren = (node: Tree) => of(node.Children);
const TC = new NestedTreeControl(GetChildren);

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.scss'],
})
export class TreeComponent implements OnInit {
  tc = TC;

  tree: Tree[];

  constructor(private apiService: ApiService) {}

  ngOnInit(): void {
    this.apiService.getTree().subscribe(
    tree => this.tree = tree
    );
  }

  hasChild(_: number, node: Tree) {
    return node.Children != null && node.Children.length > 0;
  }
}

Мой шаблон выглядит следующим образом: 

<mat-tree [dataSource]="tree" [treeControl]="tc">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
  <li>
    <div>
      <button mat-icon-button disabled>
        <mat-icon>
          remove
        </mat-icon>
      </button>
      {{node.Name}} - {{node.KeyName}}
    </div>
  </li>
</mat-tree-node>

<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
  <li>
    <div class="mat-tree-node">
      <button mat-icon-button matTreeNodeToggle>
        <mat-icon>
          {{tc.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button> {{node.Name}}
    </div>
    <ul [hidden]="!tc.isExpanded(node)">
      <ng-container matTreeNodeOutlet></ng-container>
    </ul>
  </li>
</mat-nested-tree-node>

Как уже говорилось, дерево отображается правильно до некоторой точки, где возникает ошибка.Число всех узлов и листьев в дереве составляет около 1625.

Как я могу решить эту проблему, продолжая использовать угловое дерево материалов?

1 Ответ

0 голосов
/ 11 февраля 2019

Ответ от следующего вопроса на github link .

Вы должны использовать flat-tree для большого количества данных вместо nested-tree.

Niceзнать, как это нигде не задокументировано на официальной странице материала

...