In my code, I am creating a NavBar with items that may require fetching extra information from an API and adding it to the subtitle field.
I want to transform this into an Observable<NavItem[]> so that it can be rendered using an Async Pipe.
Currently, the code logs each NavItem before calling ops.toArray(). However, the log call after ops.toArray() never completes...
Is there a more efficient RXJS approach to combine these items into an Observable<NavItem[]> ?
import * as ops from 'rxjs/operators';
navItem$: Observable<NavItem[]> = null
this.navItem$ = this.store.pipe(
select(fromRoute.selectLastUrls),
ops.map((d) => {
// Initial creation of NavItems
}),
ops.tap((i) => console.log(i)), // Prints an array of 5 NavItems as expected
ops.mergeAll(),
ops.mergeMap((i) =>
iif(
() => i.listItem,
// Make API calls for certain list items (To include subtitle details)
this.backendService.find({ title: [i.title] }).pipe(
ops.map((found) => ({...i, subtitle: found.items[0].info,})),
),
of(i),
),
),
ops.tap((i) => console.log(i)), // Each log line should contain 1 NavItem with data retrieved from API calls
ops.toArray(),
ops.tap((i) => console.log(i)) // This line fails to log
);