Angular RxJS加载和丰富项目列表的示例

我想获取一个包含多个项的数组，然后获取并向该数组中的每个项添加额外的数据

给定

getItemsList

和

getRelatedObject

的实现，如何实现方法

getEnrichedItemsList

interface RelatedObject={}
接口项={
id：字符串；
relatedObjectId：字符串；
}
接口EnrichedItem=项目和{
relatedObject：relatedObject；
}
接口服务={
getItemsList：（query:string）=>Observable；//实现
getRelatedObject:（relatedObjectId:string）=>Observable；//实现
getEnrichedItemList:（查询：string）=>Observable；//如何实现？
}

像这样的东西

  getEnrichedItemsList(query: string): Observable<EnrichedItem []>{
    return this.getItemsList(query).pipe(
      mergeMap(items => from(items)),
      mergeMap(item => this.getRelatedObject(item.relatedObjectId).pipe(
        map(relatedObject => Object.assign(item,{relatedObject}))
      ))
    );
  }

getEnrichedItemList（查询：字符串）：可观察{
返回此.getItemsList（query）.pipe(
合并映射（项=>from（项）），
mergeMap（item=>this.getRelatedObject（item.relatedObjectId）.pipe(
映射（relatedObject=>Object.assign（项，{relatedObject}））
))
);
}

完整示例：

类似的内容

  getEnrichedItemsList(query: string): Observable<EnrichedItem []>{
    return this.getItemsList(query).pipe(
      mergeMap(items => from(items)),
      mergeMap(item => this.getRelatedObject(item.relatedObjectId).pipe(
        map(relatedObject => Object.assign(item,{relatedObject}))
      ))
    );
  }

getEnrichedItemList（查询：字符串）：可观察{
返回此.getItemsList（query）.pipe(
合并映射（项=>from（项）），
mergeMap（item=>this.getRelatedObject（item.relatedObjectId）.pipe(
映射（relatedObject=>Object.assign（项，{relatedObject}））
))
);
}

---

完整示例：

使用

forkJoin

同时执行多个请求，并以与输入数组相同的顺序发出一个项目数组

getEnrichedItemList（查询：字符串）：可观察{
返回此.getItemsList（query）.pipe(
switchMap（items=>forkJoin（items.map（item=>this.enrichItem（item）））
)
}
enrichItem（项目：项目）：可观察{
返回此.getRelatedObject（item.relatedObjectId）.pipe(
映射（relatedObject=>（{…项，relatedObject}作为EnrichedItem））
)
}

---

这保证了丰富项目的最终顺序与

This.getItemsList（查询）接收到的顺序相同

使用

from

和

mergeMap

时可能不会出现这种情况，请使用

forkJoin

同时执行多个请求，并以与输入数组相同的顺序发出项目数组

getEnrichedItemList（查询：字符串）：可观察{
返回此.getItemsList（query）.pipe(
switchMap（items=>forkJoin（items.map（item=>this.enrichItem（item）））
)
}
enrichItem（项目：项目）：可观察{
返回此.getRelatedObject（item.relatedObjectId）.pipe(
映射（relatedObject=>（{…项，relatedObject}作为EnrichedItem））
)
}

这保证了浓缩项目的最终顺序与

This.getItemsList（query）

接收的顺序相同，在管道末端使用

from

和

mergeMap

toArray（）时可能不是这种情况，并且它！谢谢！管道末端的toArray（）和它！谢谢！