通过可观察值进行映射并返回嵌套可观察值的值

Question

希望你能帮助我。

\n

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

\n

getEnergyFromPower(systemId: number, objectId?: string) {\n    ...\n\n    return this.httpClient.get(this.BASE_URL + this.AGGREGATE_URL, {\n      headers: this.BEARER_OPTIONS.headers,\n      responseType: 'text',\n      params: params\n    })\n  }\n\n

\n

另一个应该循环遍历 Observable 的值。\n但是当我订阅和 console.log 它时，它返回一个可观察数组，如下所示：

\n

organizeEnergy(systemId: number = 49439) {\n    return this.getSystemLayout(systemId).pipe(\n      map(res => {\n        return res.map(({object_id}) => this.getEnergyFromPower(49439, object_id))\n      })\n    )\n  }\n\n\nthis.optService.organizeEnergy().subscribe(res => console.log(res))\n\n// Returns: \n// [Observable, Observable, Observable, Observable, Observable, Observable, Observable, Observable]\n\n

\n

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

\n

organizeEnergy(systemId: number = 49439) {\n    return this.getSystemLayout(systemId).pipe(\n      map(res => {\n        return res.map(({object_id}) => object_id)\n      })\n    )\n  }\n\nthis.optService.organizeEnergy().subscribe(res => console.log(res))\n//RETURNS \n// (8)\xc2\xa0[83978300, 83978301, 83978302, 83978303, 83978304, 83978305, 83978306, 83978307]\n

\n

我还像这样对它进行了硬编码测试，它有效：

\n

  organizeEnergy(systemId: number = 49439) {\n    return this.getEnergyFromPower(systemId, '83978300')\n  }\n\nthis.optService.organizeEnergy().subscribe(res => console.log(res))\n//RETURNS \n// 2021/07/13 08:55:00.000,38\n\n

\n

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

\n

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

\n

所以我想在订阅它时循环遍历它并动态地得到结果。

\n

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

\n

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