Angular component not getting data from service to pass to shared control

Question

I've set up a basic app that calls a service to get data to pass to a shared control by calling a service that exposes an observable. However, the service is returning an empty array. I'm am trying to figure out what the data is not being returned.

Here is a full stackblitz: https://stackblitz.com/edit/angular-ivy-o5wjvf

Answer 1

your combineLatest needs to be subscribed to... otherwise your current call will not set the next value of userItemsEntityListSubject$

your current code:

  combineLatest(this.userItems$, this.items$).pipe(
      map(([useritems, items]) => {
        console.log(' inside the dataService combineLatest: ', useritems);
        return items
          .filter((i) => !useritems.includes(i.itemId))
          .map((item) => {
            return {
              entityId: item.itemId,
              entityName: item.itemName,
              entityCategory: '',
            };
          });
      })
    ),
      tap((val) => console.log(' the value of moSelectParticipants$: ', val));
    tap((val: IMySelectEntity[]) => this.userItemsEntityListSubject$.next(val));

not sure why you left the tap out of the pipe , maybe was a bad C&P

this is the fix (please also notice the square brackets in the combineLatest ):

combineLatest([this.userItems$, this.items$]).pipe(
      map(([useritems, items]) => {
        console.log(' inside the dataService combineLatest: ', useritems);
        return items
          .filter((i) => !useritems.includes(i.itemId))
          .map((item) => {
            return {
              entityId: item.itemId,
              entityName: item.itemName,
              entityCategory: '',
            };
          });
      }),
    ).subscribe(items => this.userItemsEntityListSubject$.next(items))