Angular 如何将可观察对象映射为内部可观察对象?
如何将可观察对象映射为内部可观察对象 以下是如何获取项目的详细信息。我想用未包装的属性映射接收到的对象Angular 如何将可观察对象映射为内部可观察对象?,angular,rxjs,Angular,Rxjs,如何将可观察对象映射为内部可观察对象 以下是如何获取项目的详细信息。我想用未包装的属性映射接收到的对象 this.fetchData.getItemData().pipe( mergeMap((item: any) => { return { ...item, images: item.image
this.fetchData.getItemData().pipe(
mergeMap((item: any) => {
return {
...item,
images: item.images.map(id => this.http.get(baseUrl + link)) -->> I want to unwrap here. (it is an observable; that's why!)
}
})
)
在这里,我正在映射内部属性图像,它是一个数组到一个可观测数组强>
这就是我尝试过的:
this.fetchData.getItemData().pipe(
forkJoin((item: any) => {
return {
...item,
images: item.images.map(id => this.http.get(baseUrl + link))
}
})
)
this.fetchData.getItemData().pipe(
mergeMap((item: any) => {
return {
...item,
images: item.images.map((id) =>
flatMap(() => this.http.get(baseUrl + link))
),
};
})
)
尝试此操作,将外部值设置为
itemResponse
,然后稍后使用
import { mergeMap, map } from 'rxjs/operators';
....
let itemResponse: any;
this.fetchData.getItemData().pipe(
mergeMap((item: any) => {
// assign itemResponse to item be used later
itemResponse = item;
// switch to all images
return forkJoin(...item.images.map((id) => this.http.get(baseUrl + link)));
}),
// spread itemResponse and assign images property to images value and return the object
map(images => ({ ...itemResponse, images })),
);
这是一个例子
由于只有两个级别的请求,您可以简单地嵌套:
this.fetchData.getItemData().pipe(
mergeMap((item: any) => forkJoin(item.images.map(id => this.http.get(baseUrl + link))).pipe(
// At this point all previous results are in scope so format the result as required
map(images => ({...item, images})
)
);
如果您不喜欢嵌套,或者对于更通用的解决方案,可以使用实用程序操作符(注意,我参与了它的实现):
// fetch all the data, with all results aggregated into an object
concatJoin(
{item: this.fetchData.getItemData()},
{images: ({item:any}) => forkJoin(item.images.map(id => this.http.get(baseUrl + link)))}
).pipe(
// convert it into the format you want
map(({item:any, images}) => ({...item, images}))
);