Как сделать карту переключателей rxjs для отображения всего содержимого элемента таблицы

Question

Обычно я делаю что-то подобное для объединения таблиц с rxjs.

const item: AngularFirestoreCollection<any> = this.afs.collection(`orders`,
  (ref) => ref.orderBy('createdAt', 'desc'));

  return item.valueChanges().pipe(
    switchMap(arr => {
      const userObservables = arr.map(collects => this.afs.doc(`users/${collects.uid}`).valueChanges());
      return combineLatest(...userObservables)
          .pipe(
            map((...eusers) => {
              arr.forEach((collect, index) => {
                collect.username =  eusers[0][index]['displayName']['username'];
                collect.first_name =  eusers[0][index]['displayName']['first_name'];
            });
              return arr;
          })
          );
    })

Но в этом случае я хочу объединить всетаблица продукта (by cart.product.id) и таблица пользователя (cart.product.uid) карты переключения на наблюдаемую.

Я пробовал это, но, похоже, это не работает.Каков был бы способ сделать это?

return this.afs.doc<Order>(`orders/${id}`)
    .valueChanges()
    .pipe(
      switchMap(arr =>  arr.cart.map(cart => this.afs.doc(`products/${cart.product.id}`).valueChanges())
      ),
      map(arr => arr)
    );