如何在 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)
);

但我现在需要根据其属性获取此项目的收费小时数：

id
fechaComiezoTrabajos
fechaFinPlanificacion

也就是我需要这样的东西

但是我得到一个错误，因为 concatMap returns 一个 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,
    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 => ...)
    )

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

How to avoid nested subscriptions with concatMap in Angular

concatmap

angular

rxjs-observables