Угловая асинхронная труба внутри ngFor возвращает ноль - PullRequest
Новая
       15

Угловая асинхронная труба внутри ngFor возвращает ноль

0 голосов
/ 05 июня 2019

У меня есть следующий код: 

<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));

Результат равен null для событий для каждой категории. Конечная цель: 

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

Это работает, как и ожидалось: 

  {{ events | async | json }}

Есть идеи, почему подписка на события возвращает нуль внутри подписки на категории?

1 Ответ

0 голосов
/ 05 июня 2019

По какой-то причине это работает: 

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({}));

(Разница в том, что я не использую категории, наблюдаемые в качестве исходного источника, но снова запрашиваю коллекцию категорий, добавлен оператор startWith, поскольку я не могу использовать оператор elvis, чтобы избежать нулевой ошибки в начале).

...