I'm facing a little issue with the async pipe in Angular. Here's my scenario: I need to execute nested observables using the async pipe in HTML because I'm utilizing the on-push change detection strategy and would like to avoid workarounds or manually triggering change detection. The problem I'm encountering is that only the first observable seems to get called. Do I need to add return statements or what could be causing this issue?
Typescript 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>