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>

Adrian Brand · Accepted Answer · 2019-12-22 21:56:10Z

2

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

answered Dec 22, 2019 at 21:56

Adrian Brand

21.8k4 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hamzeh rommaneh Over a year ago

I replaced the map with the switch map and i did assign the useres to observable and still only the first observable is called

bryan60 Over a year ago

Switch map into forkjoin.

hamzeh rommaneh Over a year ago

Okay i forgot a brace , it worked according to adrian code it has ran successfully, and both observables were called but the users werent loaded in html

Adrian Brand Over a year ago

Did you do anything with the user template variable to display it like <div *ngFor=let user of users$ | async>{{ user | json }}</div> ? Your template code just creates an empty div per user and doesn't use the user variable.

Collectives™ on Stack Overflow

Async pipe with rxjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related