Повторяющиеся вызовы при использовании concatMap

Question

Я хочу отобразить следующее предстоящее событие, на которое зарегистрирован пользователь.

Для этого мне нужно сначала извлечь ближайшее событие (по времени), на которое зарегистрирован пользователь, а затем получить информацию об этом событии.

Имеет список событий, на которые зарегистрирован пользователь, является динамическим, так же как и информация о событиях, которую мне нужно использовать два Observable подряд.

Поэтому я попытался использовать concatMap, но я вижу, что функция getEvent вызывается 11 раз... Я не понимаю, почему и как я мог сделать это лучше.

Вот мой контроллер

//Controller
    nextEvent$: Observable<any>;

      constructor(public eventService: EventService) {
        console.log('HomePage constructor');
      }

      ngOnInit(): void {
        // Retrieve current user
        this.cuid = this.authService.getCurrentUserUid();
        this.nextEvent$ = this.eventService.getNextEventForUser(this.cuid);
      }

EventService (который содержит функцию getEvent, вызываемую 11 раз)

// EventService
getEvent(id: string, company?: string): FirebaseObjectObservable<any> {
    let comp: string;
    company ? comp = company : comp = this.authService.getCurrentUserCompany();
    console.log('EventService#getEvent - Getting event ', id, ' of company ', comp);
    let path = `${comp}/events/${id}`;
    return this.af.object(path);
  }

  getNextEventForUser(uid: string): Observable<any> {
    let company = this.authService.getCurrentUserCompany();
    let path = `${company}/users/${uid}/events/joined`;
    let query = {
      orderByChild: 'timestampStarts',
      limitToFirst: 1
    };

    return this.af.list(path, { query: query }).concatMap(event => this.getEvent(event[0].id));
  }

И наконец мой взгляд

<ion-card class="card-background-image">

    <div class="card-background-container">
      <ion-img src="sports-img/img-{{ (nextEvent$ | async)?.sport }}.jpg" width="100%" height="170px"></ion-img>
      <div class="card-title">{{ (nextEvent$ | async)?.title }}</div>
      <div class="card-subtitle">{{ (nextEvent$ | async)?.timestampStarts | date:'fullDate' }} - {{ (nextEvent$ | async)?.timestampStarts | date:'HH:mm' }}</div>
    </div>

    <ion-item>
      <img class="sport-icon" src="sports-icons/icon-{{(nextEvent$ | async)?.sport}}.png" item-left>
      <h2>{{(nextEvent$ | async)?.title}}</h2>
      <p>{{(nextEvent$ | async)?.sport | hashtag}}</p>
    </ion-item>

    <ion-item>
      <ion-icon name="navigate" isActive="false" item-left small></ion-icon>
      <h3>{{(nextEvent$ | async)?.location.main_text}}</h3>
      <h3>{{(nextEvent$ | async)?.location.secondary_text}}</h3>
    </ion-item>

    <ion-item>
      <ion-icon name="time" isActive="false" item-left small></ion-icon>
      <h3>{{(nextEvent$ | async)?.timestampStarts | date:'HH:mm'}} - {{(nextEvent$ | async)?.timestampEnds | date:'HH:mm'}}</h3>
    </ion-item>

  </ion-card>

Answer 1

this.af.list(path, { query: query }).concatMap(event => this.getEvent(event[0].id)) холод Observable, Это означает, что каждый раз, когда вы выполняете подписку, он будет повторно выполнять основной поток, что означает повторный вызов getEvent метод.

async неявно присоединяется к ObservableВот почему, если вы считаете (nextEvent$ | async) звонки в вашем шаблоне, вы увидите, откуда приходит 11.

& tldr; Вам необходимо поделиться подпиской на поток:

this.nextEvent$ = this.eventService.getNextEventForUser(this.cuid)
   // This shares the underlying subscription between subscribers
   .share();

Вышеуказанное соединит поток в первый раз, когда он будет подписан, но затем впоследствии поделится этой подпиской между всеми подписчиками.

Answer 2

RXJS-х concatMap Метод сводит все события в одну наблюдаемую. Вы, вероятно, лучше использовать switchMap метод. SwitchMap подписывается только на самые последние наблюдаемые.

Выполнение чего-то подобного может решить вашу проблему:

До:

return this.af.list(path, { query: query }).concatMap(event => this.getEvent(event[0].id));

После:

return this.af.list(path, { query: query }).switchMap(event => event);