Tengo un componente Angular que necesita datos de tres fuentes separadas, s1$ , s2$ y s3$ . Estas son, de hecho, llamadas API.

Estoy creando un valor combinado llamado pageData$ , esencialmente un objeto que contendrá los tres valores para la plantilla.

También quiero que los datos se muestren tal como vienen en lugar de esperar a que se completen todas las solicitudes.

Probé el mergeMap , pero me di cuenta de que esto no funcionaría porque cada Observable anidado necesita emitir al menos una vez para que se emita el resultado mapeado. Dado que estas tres fuentes son, de hecho, solicitudes HTTP, esto significa esencialmente que estoy obteniendo un comportamiento similar al de forkJoin .

Entonces, probé con combineLatest , pero aún se comporta igual. Aquí está el código:

 constructor(route: ActivatedRoute) { // Attempt with mergeMaps: this.pageData$ = route.params.pipe( // I get some Id from route parameters switchMap(params => s1$.pipe( mergeMap(s1 => s2$.pipe( mergeMap(s2 => s3$.pipe( map(s3 => { return { data1: s1, data2: s2, data3: s3 }; }) )) )) )) ); // Attempt with combineLatest: this.pageData$ = route.params.pipe( switchMap(params => this.getPageData$(params['id'])) ); } private getPageData$(eventId: string): Observable<EventGroupPageData> { return combineLatest([ s1$, s2$, s3$ ]).pipe( map(([s1, s2, s3]) => { return { data1: s1, data2: s2, data3: s3 }; }) ); }

En la plantilla, estoy usando una async pipe para desempaquetar los valores y representar la interfaz de usuario:

 <div *ngIf="pageData$ | async as pageData"> render... </div>

Ahora, me gustaría poder representar cada uno de los tres elementos tan pronto como ese dato en particular provenga de la API, lo que parece que no puedo lograr.

¿Algunas ideas?