Я пытаюсь построить дерево с помощью Angular (6).Я следую за документацией material.angular.io с этим StackBlitz .
В примере используются жестко закодированные данные TREE_DATA для отображения в виде дерева.Я изменил метод buildFileTree() из примера на этот:
buildFileTree(categories: [Category], level: number): FileNode[] {
const dataToReturn: FileNode[] = [];
categories.forEach((category: Category) => {
const fileNode = new FileNode();
fileNode.id = category.id;
fileNode.category = category;
fileNode.title = category.title;
this.categoryApi.getChild(category.id).subscribe((result: [Category]) => {
fileNode.children = this.buildFileTree(result, level + 1);
});
dataToReturn.push(fileNode);
});
return dataToReturn;
}
Когда я устанавливаю console.log(dataToReturn) непосредственно перед тем, как фактически возвращаю данные, я вижу, что данные полны (все данные, которые я хочуесть), но отображает только заголовок верхней категории: «Apple».Смотрите скриншот для получения дополнительной информации о том, как выглядит dataToReturn.
Вот как строится HTML-страница:
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
<button mat-icon-button disabled></button>
{{node.title}}
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<p>Has child</p>
<button mat-icon-button matTreeNodeToggle
[attr.aria-label]="'toggle ' + node.title">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
{{node.title}}
</mat-tree-node>
Со стандартно жестко закодированными данными,это работает отлично, но не с данными, как показано на скриншоте.Понятия не имею, что я делаю не так: (
