Angular5中ng2-tree节点展开时动态加载子节点失效问题

我来帮你搞定这个异步加载子节点的问题～你遇到的情况大概率是loadChildren方法的异步处理逻辑没写对，毕竟HTTP请求是异步操作，得让Ng2-tree知道要等请求完成再渲染子节点。

问题根源 #

Ng2-tree的loadChildren要求传入一个返回Promise<TreeModel[]>的函数，如果你的代码里没有正确把HTTP请求的异步流程和这个方法绑定，组件就没法正确等待数据加载完成。

修正后的代码示例 #

你可以把HTTP请求的逻辑直接封装到loadChildren里，让它在节点展开时才触发请求，同时确保返回Promise：

// 构建根节点的逻辑
buildRootNode(): TreeModel {
  return {
    value: '根目录',
    // 把加载逻辑直接放在loadChildren里
    loadChildren: () => {
      // 直接返回请求的Promise，Ng2-tree会自动等待它完成
      return this.hdfsService.getService(this.hdfsService.getHdfsPonds("/"))
        .then(result => {
          // 过滤目录并转换为TreeModel数组
          return result.fileStatus
            .filter(item => item.type === "DIRECTORY")
            .map(dir => ({
              value: dir.pathSuffix, // 替换成你实际要显示的节点名称字段
              // 递归设置子节点的加载逻辑，这样子节点展开时也会触发请求
              loadChildren: () => this.loadChildNodes(dir.fullPath) // 假设dir有fullPath字段
            } as TreeModel));
        });
    }
  };
}

// 封装子节点的加载逻辑，方便复用
loadChildNodes(nodePath: string): Promise<TreeModel[]> {
  return this.hdfsService.getService(this.hdfsService.getHdfsPonds(nodePath))
    .then(result => {
      return result.fileStatus
        .filter(item => item.type === "DIRECTORY")
        .map(dir => ({
          value: dir.pathSuffix,
          loadChildren: () => this.loadChildNodes(dir.fullPath)
        } as TreeModel));
    });
}

关键注意点 #

• 必须返回Promise：如果你的hdfsService.getService返回的是Observable（比如用Angular HttpClient的话），记得用.toPromise()转换，比如：

  return this.hdfsService.getService(...)
    .toPromise()
    .then(result => { ... });
  

• 不要提前请求数据：一定要把请求逻辑放在loadChildren内部，这样只有当用户点击展开节点时才会发起请求，避免不必要的网络请求。
• 检查请求是否成功：打开浏览器控制台的网络面板，确认HTTP请求能正常返回数据，没有4xx/5xx错误，也没有跨域问题。
• 数据结构要匹配：确保result.fileStatus是数组，且每个item的type字段值是"DIRECTORY"（注意大小写是否一致）。

内容的提问来源于stack exchange，提问作者Bijay Kumar Rai