如何在 Angular 中使用 concatMap 避免嵌套订阅

编程问答 2022-05-27

问题描述

我使用此代码获得了一系列产品

 proyecto$:Observable<Proyecto>
 this.proyecto$=this.http.get<ProjectApi>(`${this.urlProyecto}/${this.proyectoId}`)
.pipe(
  map(p => <Proyecto>{
    id: p.id,descripcion: p.name,fechaComienzoTrabajos: p.workStartDate,fechaHistorico: p.historicoDate,fechaFinPlanificacion: p.planningEndDate,proyectoCerrado: p.projectClosed,faseCerrada: p.phaseClosed,tieneHijos: p.tieneHijos
  }),tap(data=>console.log('Proyecto: ',JSON.stringify(data))),catchError(this.handleError)
);

但我现在需要根据它的属性来计算这个项目中的小时数：

  • id
  • fechaComiezoTrabajos
  • fechaFinPlanificacion

也就是说，我需要这样的东西

concatMap

但是我得到一个错误，因为 concatMap 返回一个 Observable 而 proyecto$ 是一个 Observable

如果我试试这个

horas$:Observable<Horas[]>
this.horas$=this.proyecto$=this.http.get<ProjectApi>(`${this.urlProyecto}/${this.proyectoId}`)
.pipe(
  map(p => <Proyecto>{
    id: p.id,tieneHijos: p.tieneHijos,}),concatMap(proyecto=>this.http.get<Horas[]>(`${this.urlProyecto}/fechainicio/${proyecto.fechaComienzoTrabajos}/fechafin/${proyecto.fechaFinPlanificacion}/horas`)),catchError(this.handleError)
);

我在两个变量中都出错

如果我试试这个

this.proyecto$=this.http.get<ProjectApi>(`${this.urlProyecto}/${this.proyectoId}`)
.pipe(
  map(p => <Proyecto>{
    id: p.id,catchError(this.handleError)
);

this.horas$=this.proyecto$
  .pipe(
    concatMap(proyecto=>this.http.get<Horas[]>(`${this.urlProyecto}/fechainicio/${proyecto.fechaComienzoTrabajos}/fechafin/${proyecto.fechaFinPlanificacion}/horas`)),tap(data=>console.log('Horas: ',JSON.stringify(data)))
  );

我在his.horas$里什么都没有，其实http.get是没有进行的

如何将 concatMap 返回的值分配给另一个可观察变量？

谢谢

解决方法

创建另一个变量，如

"EDT"
angularangularconcatmaprxjs-observables