Odtnhj

I am using NGRX with angular 6. In my component, I make a call to a selector which returns a list of objects.For example,

 list$: Observable<any>;
this.list$ = this.store$.select(getPreviousById(Id));

Currently, I bind the returned list to my html using the |async and it works nicely. I have a new requirement where some items in the list are keys that I need to make another API call to get the full details for each of them. I'm not sure how to do this, and still retain the binding on the HTML cleanly.

Do I have to process the initial returned observable and then extract this keys, dispatch an action to the store and merge the results back to the initial list?

What is the way for calling several observables within an observable and only marking it as complete when all the child observables have returned, all in NGRX?

You can use the flatMap operator to do that. With this operator you map every item to an Observable and then they get merged back together so in the end you have a single observable with all the items. Here is a simple example:

const items: Observable<Item | number> = of(new Item(1, 'Name1'), 3, 4, new Item(1, 'Name2'));

const outputItems: Observable<Item> = items.pipe(
 mergeMap((x: Item | number) => 
 if (typeof x === 'number') // it is a key call service
 return of(new Item(x, `Name$x`)); // here you call the service to get the item 
 else 
 return of(x); //return observable directly from item
 
 )
);

Use the concatMap operator if you want to preserve the order of items.