Mat-tree with async loading of children adds children to last node of level

Viewed 3066

I started with the basic example but changed it so the _getChildren method instead pulls back data in an async manner (in my case that is GraphQL, it does not like recursive models :/)

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

What I end up with is a tree where all children for the entire level are nested under the last node of that level.

So

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

becomes

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

the code looks good in the debugger, the current node is correct, the data returned is correct, but the visual display is not. please note that it does respect the level, on deep trees the levels are respected, but everything just ends up in the last node of that level.

Code:

factory method to solve context problems on the callback; breakpoints (marked below) show the nodes get added to the right parents.

  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([]);
    };
  }

Possible duplicate of (Angular 6 Material Nested Tree is not working with dynamic data) although I'm not changing data, just lazy loading it.

0 Answers
Related