Angular async pipe inside ngFor returns null

Question

I have the following code:

<ng-container *ngFor="let category of categories | async">
  {{ events | async | json }}
</ng-container>



this.categories = this.db
  .collection('categories')
  .valueChanges();

this.events = this.categories
  .pipe(switchMap((categories: { category: EventCategory }[]) => categories))
  .pipe(mergeMap((category: { category: EventCategory }) => {
    return this.db
      .collection('events')
      .doc(category.category)
      .collection('items', ref => ref
        .where('endTime', '>=', +new Date()))
      .valueChanges()
      .pipe(map((events: Event[]) => events.map(mapToDate)))
      .pipe(map((events: Event[]) => ({ [category.category]: events })));
  }))
  .pipe(scan((acc: any, curr: { events: Event[] }) => ({ ...acc, ...curr }), {}))
  .pipe(debounceTime(100));

The result is null for events for each category. The final goal is:

<ng-container *ngFor="let category of categories | async">
  {{ (events | async)[category.category] | json }}
</ng-container>

This works as expected though:

  {{ events | async | json }}

Any idea why the subscription to events returns null inside the subscription of categories ?

Answer 1

For some reason this works:

this.events = this.db
  .collection('categories')
  .valueChanges()
  .pipe(switchMap((categories: { category: EventCategory }[]) => categories))
  .pipe(mergeMap((category: { category: EventCategory }) => {
    return this.db
      .collection('events')
      .doc(category.category)
      .collection('items', ref => ref
        .where('endTime', '>=', +new Date()))
      .valueChanges()
      .pipe(map((events: Event[]) => events.map(mapToDate)))
      .pipe(map((events: Event[]) => ({ [category.category]: events })));
  }))
  .pipe(scan((acc: any, curr: { events: Event[] }) => ({ ...acc, ...curr }), {}))
  .pipe(debounceTime(100))
  .pipe(startWith({}));

(The difference is that I don't use categories observable as the initial source but query again the categories collection, added startWith operator since I can't use elvis operator to avoid null error at the beginning).