如何实现ng2-tree以递归方式动态加载文件夹和文件

时间:2018-03-22 09:21:19

标签: angular

嗨我正在使用角度5和Ng2树来创建树,我的情况是在每个节点的expand事件上加载子子节点。所以我找到了TreeModel的loadChildren,但当我在其中使用http请求时它无法正常工作。

这是我的实施。

var jsonArray: any;

this.hdfsService.getService(this.hdfsService.getHdfsPonds("/")).then(result => {
  jsonArray = result.fileStatus.filter(function (i) {
    return i.type === "DIRECTORY";
  });
  for (let jsonVal of jsonArray) {
    let tree1: TreeModel = {
      value: jsonVal.name,
      name: jsonVal.path,
      settings: { isCollapsedOnInit: false },
      loadChildren:(callback) => {
        setTimeout(() => {
          console.log("=================================executed")
          callback(this.loadChild(jsonVal.path));
        }, 5000);
      }
    };
    this.hdfsPondArray.push(tree1);
    this.onNodeCreated(this.formTOAddNewPond.value.path);
    this.formTOAddNewPond.reset();
    this.showDialog = false;
  }
});

和我的childLoad方法

loadChild(path) {
var childJsonArray: any;
var childrens: TreeModel[] = [];
var testArray: any[] = [];
this.hdfsService.extractArray("/"+path).subscribe((json: any) => {
  childJsonArray = json.fileStatus;
  for (let json of childJsonArray) {
    testArray.push({value:json.name})
  }
});
console.log("=========================================================================================");
console.log(testArray);
return testArray

}

另一种情况是我的子节点可以进一步调用它的子子节点,因此可以使用Ng2-tree,以及为什么我的代码在正确获取文件夹时没有显示。

1 个答案:

答案 0 :(得分:0)

我已经解决了它,通过在回调之前调用方法然后在setTimeout()中调用回来;这样的事情。

loadChildren: (callback) => {
        var childrens: TreeModel[] = this.loadChild(jsonVal.path)
        setTimeout(() => {
        console.log("=================================executed")
        callback(childrens);
        }, 300);
      }

如果有任何最佳做法,请分享。