通过可观察对象映射并返回嵌套可观察对象的值答案

【问题标题】：Mapping through an observable and return values of nested observable通过可观察对象映射并返回嵌套可观察对象的值
【发布时间】：2021-09-22 18:27:51
【问题描述】：

希望你能帮帮我。

我有一个名为 getEnergyFromPower 的函数，它返回一串值：

getEnergyFromPower(systemId: number, objectId?: string) {
    ...

    return this.httpClient.get(this.BASE_URL + this.AGGREGATE_URL, {
      headers: this.BEARER_OPTIONS.headers,
      responseType: 'text',
      params: params
    })
  }

还有一个应该循环遍历 Observable 的值。但是当我订阅和 console.log 时，它会返回一个 observables 数组，如下所示：

organizeEnergy(systemId: number = 49439) {
    return this.getSystemLayout(systemId).pipe(
      map(res => {
        return res.map(({object_id}) => this.getEnergyFromPower(49439, object_id))
      })
    )
  }


this.optService.organizeEnergy().subscribe(res => console.log(res))

// Returns: 
// [Observable, Observable, Observable, Observable, Observable, Observable, Observable, Observable]

我测试了 object_id 是否正确并返回正确的值，如下所示：

organizeEnergy(systemId: number = 49439) {
    return this.getSystemLayout(systemId).pipe(
      map(res => {
        return res.map(({object_id}) => object_id)
      })
    )
  }

this.optService.organizeEnergy().subscribe(res => console.log(res))
//RETURNS 
// (8) [83978300, 83978301, 83978302, 83978303, 83978304, 83978305, 83978306, 83978307]

我也像这样对它进行了硬编码测试，它可以工作：

  organizeEnergy(systemId: number = 49439) {
    return this.getEnergyFromPower(systemId, '83978300')
  }

this.optService.organizeEnergy().subscribe(res => console.log(res))
//RETURNS 
// 2021/07/13 08:55:00.000,38

所以我猜我的问题是当我尝试在这一行中映射响应时：

organizeEnergy(systemId: number = 49439) {
     ...
        return res.map(({object_id}) => this.getEnergyFromPower(49439, object_id))
     ...
  }

所以我想循环浏览它并在我订阅它时动态显示结果。

也许这是我还没有掌握的东西，因为我开始使用 Angular/Observables/HttpClient 已经两周了

【问题讨论】：

标签： javascript angular rxjs observable rxjs-observables

【解决方案1】：

我认为您需要使用switchMap 和combineLatest 的组合。

import { combineLatest } form 'rxjs';
import { switchMap } from 'rxjs/operators';

organizeEnergy(systemId: number = 49439) {
    return this.getSystemLayout(systemId).pipe(
      // change map to switchMap because we are going to switch to a new observable
      switchMap(res => {
        // combine all HTTP requests and return the results as an array
        return combineLatest(...res.map(({object_id}) => this.getEnergyFromPower(49439, object_id)));
      }),
    )
  }

// This should give you [2021/07/13 08:55:00.000,38, ...]
this.optService.organizeEnergy().subscribe(res => console.log(res))

【讨论】：