如何实现这个 angular-tree-component 异步数据代码？

Question

我在实现这个 https://angular2-tree.readme.io/docs/async-data-1 时遇到了问题。如何将 OnInit 中的以下代码重写为文档中的异步代码？:

this.client.get(API_URL, this.httpOptions).subscribe(
  (res) => { this.nodes.push(res) },
  (error) => { this.handleError(); }
);

也请参考这个问题

Answer 1

将树创建为异步意味着，您可以在 parent 节点扩展时获取它的 children，而不是首先加载所有项目。

所以首先你将创建节点数组，

  nodes: any[] = [];

并且在 ngOnInt 生命周期中，您可以只推送顶级节点，例如，

ngOnInit() {
  this.client.get(API_URL_TO_FETCH_PARENT_NODES, this.httpOptions).subscribe(
    (res) => { this.nodes.push(res) },
    (error) => { this.handleError(); }
  );
}

所以得到数据后，节点数组应该是这样的，

    [
      {
        name: 'root1',
        hasChildren: true
      },
      {
        name: 'root2',
        hasChildren: true
      },
      {
        name: 'root3'
      }
    ];

所以 hasChildren 属性也应该来自后端 api，这样只有组件才能理解这个具有 children 的特定节点并且需要从另一个 children 获取=31=].

接下来我们需要给angular-tree-component提供选项，这样它就可以理解从哪里获取children。

 options: ITreeOptions = {
    getChildren: this.getChildren.bind(this),
    useCheckbox: true
  };

 getChildren(node: any) {
   return this.client.get(API_URL_TO_FETCH_CHILD_NODES_BY_PARENTID, this.httpOptions)
  }

一旦你扩展了一个 parent 节点 root1，getChildren 将被库调用并且它的 children 将附加到它。

 template: `
    <tree-root #tree [options]="options" [nodes]="nodes"></tree-root>
 `,

如何实现这个 angular-tree-component 异步数据代码？

How to implement this angular-tree-component async data code?

json

angular

angular-httpclient

angular-tree-component