一个又一个http调用的角度合并图答案

【问题标题】：Angular merge map for one after another http calls一个又一个http调用的角度合并图
【发布时间】：2020-12-31 08:10:14
【问题描述】：

getDetails() 方法返回一个 Details[] 并使用该数组和一个 name 属性，我将其传递给另一个 http 调用

Details {
    name: String;

详情

 getDetails()
     return this.https.get("/someValue") //this return Details[] from here I have to take  name property

{name : hello}

信息

 getInformations(name:string) {
    return this.https.get("/anotherValue"+"?"+ name)
 }

我正在尝试首先调用getDetails() 并将名称属性传递给

Information{
  Hieght:string
  age:string
}

getInformations()
this.getDetails().pipe(mergeMap(x => 
 this.getInformations(x.name)).subscribe((inforamtionResults:Information[])=>{
  console.log("Checking Informations"+inforamtionResults.length)

 {height:160,
   age: 23
   }

这不起作用，因为 x 值是一个数组。如何迭代数组并将数组属性作为参数传递？

【问题讨论】：

标签： angular typescript rxjs rxjs6

【解决方案1】：

正如你所说，你需要迭代每个 ~~this.getInformations(x.id)~~ Details。您只需使用Array.map() 即可做到这一点。然而，mergeMap 想要一个 observable，但我们拥有的是一组 observable。幸运的是，我们可以使用 rxjs 的 forkJoin 将这些可观察对象数组组合成一个可观察对象。

this.getDetails()
  .pipe(
    mergeMap((details) =>
      forkJoin(details.map((x) => this.getInformations(x.id)))
    )
  )
  .subscribe((x) => console.log(x));

这是sample demo。我使用了不同的 API，但实现类似。

【讨论】：

在处理 rxjs 时，这个operator decision tree 对我帮助很大，所以我就把它放在这里。
对于 x 我得到双数组值 x[][]
forkJoin 并没有像here 所说的那样被弃用（我正在使用rxjs 6.5.4）。您能否更新您的问题以显示您将从getDetails() 和getInformations() 收到的数据结构？
我已经更新了问题...你能看看吗。我不想迭代每个 this.getInformations(x.id)。只想做一个序列 HTTP 调用首先检索获取详细信息并从那里获取名称属性，然后将相同的属性传递给另一个调用 getInformation(x.id)
让我们continue this discussion in chat。

【解决方案2】：

你需要像这样尝试。

 getDetails() {
    return this.http.get("/someValue")
      .pipe(
        mergeMap((x) => {
          return this.getInformations(x.id)
        })
      );
  }

【讨论】：

你为什么使用响应？？