嵌套合并组合组合

Question

我正在使用表单tool＆gt;功能＆gt;查看。换句话说，有工具，工具具有功能，功能具有视图。

在Angular 2（13）中，我正在使用服务来处理HTTP调用以获取数据。当应用启动时，解析器触发了服务的设置工具>数组属性，通过调用服务的settools（）方法。此方法应通过获取工具，然后用各个功能填充每个工具来构建工具，这些功能均通过视图填充，全部通过嵌套的HTTP调用每个部分。

我找到了一个实现从rxjs）将其降低到单层。然后，我在服务中实现了以下内容：

setTools(): Observable<Tool[]> {
  return this.getTools().pipe(
    mergeMap(tools =>
      forkJoin<Tool[]>(
        tools.map(tool =>
          this.getFeatures(tool.id).pipe(
            map(features => ({ ...tool, features })
          )
        )
      )
    ),
    tap<Tool[]>(tools => console.log(tools))
  )
}

这可以正常工作。打印工具，每个工具都包含其各自的功能。伟大的！

天真地，我实施了以下内容以实现下一层人群，即视图：

setTools(): Observable<Tool[]> {
  return this.getTools().pipe(
    mergeMap(tools =>
      forkJoin<Tool[]>(
        tools.map(tool =>
          this.getFeatures(tool.id).pipe(
            mergeMap(features =>
              forkJoin<Feature[]>(
                features.map(feature =>
                  this.getViews(feature.id).pipe(
                    map(views => ({ ...feature, views })
                  )
                )
              )
            ),
            map(features => ({ ...tool, features })
          )
        )
      )
    ),
    tap<Tool[]>(tools => console.log(tools))
  )
}

但是，工具不再注销以构成控制。为什么？我在做什么错？另外，如果有另一种实施方法，我将非常感谢输入。仅供参考，我是Web开发的新手。

Answer 1

没有更多的代码/类型，我无法让您的榜样工作，因此我稍微更改了该方法，并且可能无法完全回答问题。将Mergemap与MergeAll和阵列一起提供嵌套结构。

  setTools() {
    return this.getTools().pipe(
      mergeAll(),
      mergeMap(tool =>
        this.getFeatures(tool.id).pipe(
          mergeAll(),
          mergeMap(feature=>
             this.getViews(feature.id).pipe(
                 map((views) => ({...feature, views }))
             )
          ),
          toArray(),
          map((features)=>({...tool, features}))
        )
      ),
      toArray(),
    );
  }

请参阅Stackblitz： https://stackblitz.com/edit/angular-ivy-ee1myv?file=src/app/app/app/app.component.ts

Answer 2

我只是将您的代码分为几个单独的功能。它在简约的安全带上对我来说很好。基本上没有变化...

embellishFeature(feature){
  return this.getViews(feature.id).pipe(
    map(views => ({...feature, views}))
  );
}

embellishFeatures(features){
  return forkJoin(features.map(v => this.embellishFeature(v)));
}

embellishTool(tool){
  return this.getFeatures(tool.id).pipe(
    mergeMap(v => this.embellishFeatures(v)),
    map(features => ({...tool, features}))
  );
}

embellishTools(tools){
  return forkJoin(tools.map(v => this.embellishTool(v)));
}

setTools(): Observable<Tool[]> {
  return this.getTools().pipe(
    mergeMap(v => this.embellishTools(v)),
    tap(tools => console.log(tools))
  );
}