angular - 异步加载子节点的 Mat-tree 将子节点添加到级别的最后一个节点

Question

我从基本示例开始但对其进行了更改，因此 _getChildren 方法改为以异步方式拉回数据（在我的情况下是 GraphQL，它不喜欢递归模型：/）

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

我最终得到的是一棵树，其中整个级别的所有子节点都嵌套在该级别的最后一个节点下。

所以

1
--1-1
----1-1-1
--1-2

变成

1
--1-1
--1-2
----1-1-1

代码在调试器中看起来不错，当前节点正确，返回的数据正确，但视觉显示不正确。请注意，它确实尊重级别，在深层树上，级别受到尊重，但一切都只是在该级别的最后一个节点结束。

代码：

解决回调上下文问题的工厂方法；断点（标记如下）显示节点被添加到正确的父节点。

  private lazyLoad(t: FeatureExplorerComponent): (node: FileNode) => Observable<FileNode[]> {
    return (originNode: FileNode) => {
      var node = originNode; //does not help, I think
      if (node.children.length > 0) //stops duplicate adds
        return observableOf(node.children);
      if (node.folder) {
        var folder = node.folder;
        return t.apollo.query<FolderQueryResponse>({
          query: FOLDER_QUERY, variables: { id: folder.id }
        }).pipe(map(response => {
          var f = response.data.folder;
          for (let n of t.transformFolders(t, f.folders)) {
            node.children.push(n); //this looks righ, both the node and the child
          }
          return node.children;
        }));
      }
      else
        return observableOf([]);
    };
  }

可能重复（Angular 6 Material Nested Tree is not working with dynamic data）虽然我没有更改数据，只是延迟加载它。

标签： angularangular-material