Как правильно реализовать forkJoin в моей трубе

Question

У меня следующий канал:

this.adminService.companies$
      .pipe(
        takeUntil(this.unsubscriber),
        map((data: CompanyCard[]) => {
          const companies: CompanyCard[] = [...data.map(company => ({...company}))]

          companies.forEach((company: CompanyCard) => {
            if ('_seconds' in company.created) {
              company.created = new Date(company.created._seconds * 1000)
            }

            if (company.owner) {
              this.userService.getUser(company.owner).pipe(
                take(1),
                takeUntil(this.unsubscriber),
                map((data: User) => data.email)
              ).subscribe(email => company.owner = email)
            }
          })

          return companies;
        }),
        tap(companies => this.companies = companies)
      ).subscribe();

Моя проблема в том, что когда я визуализирую эти данные в шаблоне, я вижу мигающее содержимое, потому что я получаю данные до завершения всех преобразований внутри map(). Думаю, мне нужно обернуть все операторы в forkJoin, но я не знаю, как это сделать правильно.

Answer 1

Вот так:

this.adminService.companies$
  .pipe(
    takeUntil(this.unsubscriber),
    map((data: CompanyCard[]) => data.map(company => '_seconds' in company.created
      ? ({ ...company, created: new Date(company.created._seconds * 1000) })
      : company
    )),
    switchMap((data: CompanyCard[]) => forkJoin(data.map(company => company.owner
      ? this.userService.getUser(company.owner).pipe(
        take(1),
        takeUntil(this.unsubscriber),
        map((user: User) => ({ ...company, owner: user.email }))
      )
      : of(company)
    )))
  )
  .subscribe(companies => {
    this.companies = companies;
  });