如何订阅 Observable 并在 Javascript 对象中使用该值？答案

【问题标题】：How do I subscribe to an Observable and use that value in a Javascript Object?如何订阅 Observable 并在 Javascript 对象中使用该值？
【发布时间】：2019-07-05 15:02:11
【问题描述】：

总的来说，我对 Observables、RxJS 和 Angular 还很陌生。我正在使用 Angular 7 (Ionic 4) 并且很难找到解决以下问题的方法。

在我的应用程序中，我发出如下 HTTP GET 请求：

myData = this.http.get("https://example.com/api").pipe(
  map(results => {
    return results["payload"]
  })
)

此 HTTP GET 请求返回一个 Observable myData，其中包含以下数据：

const data = [
  {
    "id": 1,
    "name": "abc",
    "description": "test1" 
  },
  {
    "id": 2,
    "name": "def",
    "description": "test2" 
  },

  ...

  ...

]

我想向这个数组中的每个对象添加另一个键 color，如下所示：

const data = [
  {
    "id": 1,
    "name": "abc",
    "description": "test1",
    "color": "green"
  },
  {
    "id": 2,
    "name": "def",
    "description": "test2",
    "color": "red"
  },

  ...

  ...

]

我不想为每个对象硬编码color 的值，而是想从另一个名为colorService 的服务中的函数getColor(id) 检索此键值。

问题在于 colorService.getColor(id) 返回一个 Observable。

问题：如何为数组中的每个对象订阅colorService.getColor(id)？

我想做这样的事情：

const data = [
  {
    "id": 1,
    "name": "abc",
    "description": "test1",
    "color": <subscribe to colorService.getColor(1)>
  },
  {
    "id": 2,
    "name": "def",
    "description": "test2",
    "color": <subscribe to colorService.getColor(2)>
  },

  ...

  ...

}

我希望我很清楚。在这一点上我的概念相当薄弱，所以如果其中一些听起来令人困惑，请道歉。

【问题讨论】：

它看起来像一个健谈的客户端。您的端点是否有办法获取所有颜色名称（按 id 查找）或按 id 过滤的 id 获得多种颜色？那么你只需要 2 个调用（你现在拥有的那个加上 get color lookup）
我不明白你为什么不订阅myData 然后循环添加每个对象的颜色，我看不出有什么问题
不确定这是否是最好的方法...但是stackblitz.com/edit/angular-8mcsxc
@Igor 我用两个http调用做了另一个例子，这是你得到的吗？ stackblitz.com/edit/angular-mbbqds
我打算将其发布为答案，但@user2216584 已经提供了相同的解决方案，因此此处参考my solution

标签： angular ionic-framework rxjs observable ionic4

【解决方案1】：

这是可以做的【见代码cmets中的解释】-

myData = this.http.get("https://example.com/api")
                      .pipe(
                              mergeMap(results => {
                                const data = results["payload"];
                                //I am assuming that `data` is the array that you mentioned in your question
                                //Iterate through each of the object in the array and map it to an observable which
                                //will fetch the color and then return the data with color

                                //obs will be an array of observables for each data
                                const obs = data.map(d => {                                  
                                  return this.colorService.getColor(d.id)
                                             .pipe(
                                               map(color => {
                                                 return {...d, color};
                                               })
                                             );
                                });

                                //wait for all the obs to be returned;
                                return forkJoin(obs);
                              }),
                              tap(dataArrayWithColor => {
                                //dataArrayWithColor will have an array of object which will have data with color
                                console.log(dataArrayWithColor);
                              })
                          );

希望对你有帮助。

【讨论】：