我从基本示例开始,但对其进行了更改,因此_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)可能的重复项,尽管我没有更改数据,只是延迟加载它。