Angular Treeview加载外部数据

Question

我正在尝试使用Angular（6）构建一棵树。 我正在跟踪material.angular.io中带有this 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>

使用默认的硬编码数据，它可以完美运行，但不能与屏幕快照中显示的数据一起使用。我不知道我在做什么错：（