使用rxjs observables、helper函数和promise更正语法

Question

我无法正确编写代码。

到目前为止我是：

getTender(id: number): Observable<TenderResponse> {
const tender$ = this.get<TenderResponse>('/tenders/' + id);
const images$ = tender$.pipe(mergeMap((tender: TenderResponse): Observable<TenderResponse> => {
return combineLatest(
tender.locations.loading.map(
(location: TenderLocation, index: number) => {
location.not_uploaded_images = from(this.fileService.getCargoImagesAtLocation(location.id));
return location;
}
)
)
}
);
return images$;
}

该方法应该得到一个Object(Tender(。当它被加载时，它有一个位置列表，每个位置都有一个id。使用这些id(用于到达位置(-我应该得到一个图像列表。然后返回结果-带有图像的位置的标书。

目前，由于不兼容的类型和弃用，该代码不起作用

this.fileService.getCargoImagesAtLocation是一个承诺，所以我使用rxjsfrom运算符将其转换为observable。。

getTender方法的结果应为Observable类型。

更新代码：

getImages(locationId: number): Observable<NotUploadedImage[]> {
return from(this.fileService.getCargoImagesAtLocation(locationId));
}
getTender(id: number): Observable<TenderResponse> {
return this.get<TenderResponse>('/tenders/' + id).pipe(
mergeMap(
(tender: TenderResponse): Observable<TenderResponse> => {
tender.locations.loading.forEach((location: TenderLocation) => {
location.not_uploaded_images = this.getImages(location.id);
});
return of(tender);
}
)
);
}

问题是not_uploaded_images没有得到解决，并且返回的Tender对象的属性是Observable的类型，但它必须是NotUploadedImages[]的类型。

我认为这是因为没有使用运算符combineLatest。但一旦我使用它，我就无法正确设置代码。

最终工作结果：

getImages(locationId: number): Observable<NotUploadedImage[]> {
return from(this.fileService.getCargoImagesAtLocation(locationId));
}
getTender(id: number): Observable<TenderResponse> {
return this.get<TenderResponse>('/tenders/' + id).pipe(
mergeMap((tender: TenderResponse) =>
combineLatest(
tender.locations.loading.map((location: TenderLocation) =>
this.getImages(location.id)
)
).pipe(
map((images: NotUploadedImage[][]) => {
return tender.locations.loading.map(
(location: TenderLocation, index: number): TenderLocation => {
return {
...location,
not_uploaded_images: images[index],
};
}
);
}),
map((locations: TenderLocation[]) => {
tender.locations.loading = locations;
return tender;
})
)
)
);
}

Answer 1

你很接近，但location.not_uploaded_images = from...和return location;加起来不一样。你不会归还Observable。

也许这就是你想要的(而且更简洁一点(：

return combineLatest(
tender.locations.loading.map((location: TenderLocation) => 
from(this.fileService.getCargoImagesAtLocation(location.id))
)
)

编辑

回答您的意见。如果我理解正确的话，mergeMap将您的父对象作为输入，并订阅一个新的Observable。新的Observable有两个目的：获取图像；将它们与父对象一起返回。为此，我们可以在mergeMap函数的上下文中创建第二个管道和映射。

根据您的stackblitz链接，这应该可以工作：

getTender(id: number): Observable<TenderResponse> {
return this.serviceThatGetsTender(id)
.pipe(
mergeMap((tender: TenderResponse) =>
combineLatest(
tender.locations.loading.map((location: TenderLocation) => this.getImages(location.id))
)
.pipe(
map(images => tender.locations.loading.map(
(t, i) => ({ ...t, not_uploaded_images: images[i] } as TenderLocation)
)),
map(locations => {
tender.locations.loading = locations;
return tender
})
)
)
)
}

注意返回的对象：Observable<{tender: TenderResponse, images: NotUploadedImage}>。这只是因为我不知道你的对象中的所有字段，我想你想把图像放在TenderResponse对象上。

此外，关于您的警告：请确保您正在导入正确的combineLatest。CCD_ 10和CCD_。你需要前者。