角rxjs.结合多个可观察物 [英] Angular rxjs. combine multiple observables
问题描述
我有2个可观察值:
-
this.configsService.getConfigsList()
-
this.bcProductService.getProductById(config ['id'])
我可以同时订阅它们和使用它们的数据.
I can subscribe to both of them and use their data.
我想获取配置列表,并将每个配置项与其对应的产品(使用config.id)进行映射...类似这样的东西.
I want to get the configs list and map each config item with its corresponding product (using the config.id)... Something like this.
const configs = this.configsService.getConfigsList;
const product= (id)=> this.bcProductService.getProductById(id);
configs.pipe(
concatMap(val => product(val['id']).map(t=>val['p']=t) )
).subscribe(test => {
console.log('configs with products: ', test);
});
但这不起作用.上面的内容不会显示错误或console.log.我在网上看到了几个例子,但我似乎可以使它正常工作.谢谢您的帮助.
but that is not working. the above does not print an error or the console.log. I see several examples of this online but i just can seem to get it working. Thank you for helping.
这是来自 https://www.learnrxjs.io/operators/的示例组合/combinelatest.html ,但出现以下错误.
this is the example from https://www.learnrxjs.io/operators/combination/combinelatest.html but i get the following error.
core.js:1673错误,TypeError:combinedProject.subscribe不是函数
core.js:1673 ERROR TypeError: combinedProject.subscribe is not a function
configsWithP(): any {
const configs = this.configsService.getConfigsList;
const product = this.bcProductService.getProductById(124);
const combinedProject = combineLatest( configs, product, (c, p) => {
return `c: ${c}, p: ${p}`;
});
// log values
const subscribe = combinedProject.subscribe(latestValuesProject =>
console.log(latestValuesProject)
);
}
推荐答案
在聊天中讨论答案并提出解决方案后,更新了答案. getConfigLists
返回一个Observable,它发出配置对象数组.然后,对于数组中的每个对象,需要从服务中检索相应的产品,然后将其与config对象合并.之后,它需要再次作为可观察到的对象发出,以发出配置对象的数组.
Updated answer after we discussed it in chat and made a solution. The getConfigLists
returns an Observable that emits arrays of config objects. Then for every object in the array the corresponding product needs to be retrieved from a service and merged with the config object. After that it needs to again come out as an observable that emits the array of config object.
这是解决方案:
private configsWithP(): any {
const configs = this.configsService.getConfigsList;
const combinedConfigs = configs.pipe(
flatMap((configsArray) => {
const getProductObservablesArray = configsArray.map((config) => this.bcProductService.getProductById(124));
return zip(...getProductObservablesArray, (...args: any[]) => args).pipe(
map(products => {
for (let i = 0; i < configsArray.length; i++) {
configsArray[i]['p'] = products[i];
}
return configsArray;
})
)
}));
combinedConfigs.subscribe(configss=> {
console.log(configss);
});
}
这里也是有效的 StackBlitz 上的示例.我没有创建服务,而是创建了可观察对象并将它们组合在一起.检查那里的控制台,您将看到输出.
Here is also a sample on StackBlitz that works. I did not create services I create observables and combine them. Check the console there and you will see the output.
这篇关于角rxjs.结合多个可观察物的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!