Как создать наблюдаемую в наблюдаемой в AngularFire Infinite Scroll

Question

Я успешно реализовал Бесконечную прокрутку AngularFire , используя бесконечную прокрутку Ionic 4 вместо CDK.

Кажется, это работает отлично, но теперь я хотел бы сделать перекрестную ссылку междуКоллекции огненного магазина.У меня есть моя «почтовая» коллекция с большим количеством документов.Некоторые из документов будут содержать поле с именем «productID», которое является идентификатором для конкретного документа в другой коллекции под названием «product».Всякий раз, когда в сообщении указывается идентификатор продукта, я бы хотел, чтобы компонент отображал некоторую информацию об этом продукте из другой коллекции.

Мне кажется, что у меня есть несколько способов сделать это, если я просто отображаю данные в"нормальный" способ AngularFire, но этот код Infinite Scroll немного выше моей головы.

Я попытался создать наблюдаемое внутри метода getBatch.Вот оригинал:

getBatch(offset) {
    return this.db
      .collection('post', ref =>
        ref
          .orderBy('postCount', 'desc')
          .startAt(offset)
          .limit(this.batch)
      )
      .snapshotChanges()
      .pipe(
        tap(arr => (arr.length ? null : (this.theEnd = true))),
        map(arr => {
          return arr.reduce((acc, cur) => {
            const id = cur.payload.doc.id;
            const data = cur.payload.doc.data();
            return { ...acc, [id]: data };
          }, {});
        })
      );
  }

и моя попытка:

getBatch(offset) {
    return this.db
      .collection('post', ref =>
        ref
          .orderBy('postCount', 'desc')
          .startAt(offset)
          .limit(this.batch)
      )
      .snapshotChanges()
      .pipe(
        tap(arr => (arr.length ? null : (this.theEnd = true))),
        map(arr => {
          return arr.reduce((acc, cur) => {
            const id = cur.payload.doc.id;
            const data = cur.payload.doc.data() as Post;

            const productid = (cur.payload.doc.data() as Post).productID;

            if (productid != undefined) {
              this.isProduct = true;
              this.afs.collection('product').doc(productid).valueChanges().subscribe(value => {
                this.productList = value;
                console.log(value);
                return;
              });
            };

            return { ...acc, [id]: data };
          }, {});
        })
      );
  }

В моем шаблоне:

<p>{{ product?.description }}</p>

внутри бесконечного свитка, конечно:

  <div *ngIf="infinite | async as postList">
    <div *ngFor="let post of postList; let i = index; trackBy: trackByIdx">

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

Будем весьма благодарны за любые рекомендации по отображению этого сообщения!