angular - 如何订阅 Observable 并在 Javascript 对象中使用该值?
问题描述
总的来说,我对 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
,而是想从getColor(id)
另一个名为colorService
.
问题是它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)>
},
...
...
}
我希望我很清楚。在这一点上我的概念相当薄弱,所以如果其中一些听起来令人困惑,我深表歉意。
解决方案
这就是你可以做的[见代码注释中的解释]-
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);
})
);
希望能帮助到你。
推荐阅读
- python - 如何在谷歌地球引擎中打印减少的像素值
- android - xamarin 不安装应用程序(APK)第二次安装
- python - 是否有任何有效的方法可以通过 numpy 数组或 pandas 数据帧中的索引沿行获取值
- python - Python:函数内部的 3 个错误处理
- java - 网格在java swing中不起作用并溢出
- r - plot.igraph 参数被忽略
- r - 如何使用map函数在r中循环多个自变量
- ruby-on-rails - Rails 关联中的自定义验证问题
- node.js - `app,use` 无法接受 `express-session` 的返回类型
- javascript - 如何自定义新日期()以仅显示所需的文件