Angular中用RxJS实现嵌套请求：为列表项补充图片路径

需求说明 #

• 初始请求返回一组条目，每个条目包含文件名字段（如imagen）
• 需要为每个文件名发起单独请求获取对应的文件路径，最终将路径追加到原条目里，让每个条目同时保留原始数据和新获取的路径

尝试的代码 #

entradas$.pipe(
mergeMap(entradas=>forkJoin 
 (entradas.map(ent=> 
 this.entradaService.getStaticSingularImage(ent.imagen))))) 
 .subscribe(data=>console.log(data))

修改后的代码 #

entradas$.pipe(
  mergeMap(entradas => forkJoin(
    entradas.map(ent => 
      this.entradaService.getStaticSingularImage(ent.imagen).pipe(
        map(imagePath => ({ ...ent, imagePath })) // 把路径追加到原条目对象中
      )
    )
  ))
).subscribe(updatedEntradas => {
  console.log(updatedEntradas);
  // 可在此处将更新后的列表赋值给组件变量或做后续处理
});

说明 #

原代码仅返回了所有文件路径的数组，未与原条目关联。修改后：

• 每个条目发起请求时，通过map操作符将返回的路径与原条目合并，生成包含原始数据和新路径的新对象
• forkJoin会等待所有请求完成后，返回完整的更新后条目数组
• 订阅后拿到的updatedEntradas就是符合预期的结果，每个条目都保留了原数据和新增的文件路径

内容的提问来源于stack exchange，提问作者Javi