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

Question

我用这段代码得到了一系列产品

 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)
);

但我现在需要在其属性的 function 中获取该项目的收费小时数：

• ID
• fechaComiezoTrabajos
• fechaFinPlanificacion

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

但是我得到一个错误，因为 concatMap 返回一个 Observable<Horas[]> 并且 proyecto$ 是一个 Observable

如果我试试这个

horas$:Observable<Horas[]>
this.horas$=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))),
  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,
    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)
);

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 返回的值分配给另一个可观察变量？

谢谢

Answer 1

创建另一个变量，例如

horas$: Observable<Horas[]>;

this.horas$ = this.proyecto$
    .pipe(
        concatMap(proyecto => ...)
    )