Async pipe with rxjs

Question

I have a little problem in async pipe Here is my case , I need to run nested observables in async pipe in html because i use on push strategy and i dont want to use some workarounds or change detector reference . My problem is , when i run the code below only the first observable is called Should i add return statements? Or whats the problem ?

Ts code

this.http.getUsers(criteria)
.pipe(map(data=>{
data.users.map(user=>{
this.http.getUserData(user.id)
.pipe(map(res=>{user.data=res.data}))}}

Html code

<div *ngFor=let user of users$ | async> </div>

Answer 1

You want to do a switchMap and you need to assign an observable to the users$ property.

users$ = this.http.getUsers(criteria).pipe(
  switchMap(user => this.http.getUserData(user.id)),
  map(res => res.data)
);