通过可观察值和嵌套可观察值的 return 值进行映射

Question

希望你能帮帮我。

我有一个名为 getEnergyFromPower 的函数，其中 returns 一串值：

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 它时，它 returns 而不是像这样的可观察数组：

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 是否正确，它 returns 的值是否正确，如下所示：

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

两周了

Answer 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))

通过可观察值和嵌套可观察值的 return 值进行映射

Mapping through an observable and return values of nested observable

javascript

observable

rxjs

angular

rxjs-observables