Question

我已经使用Ionic 4的无限滚动而不是CDK成功实现了AngularFire infinite scroll。

这似乎工作得很好，但是现在我想在Firestore集合之间进行交叉引用。我有很多文件的“后期”收藏。一些文档将包含一个名为“ productID”的字段，该字段是另一个集合中称为“ product”的特定文档的ID。每当帖子中指定了productID时，我希望该组件显示其他集合中该产品的某些信息。

如果我只是以“正常” 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">

执行此操作时，控制台将显示每个产品的产品信息，因为它们与相应的帖子相对应-就像我期望的那样。并且第一篇文章显示了与之相关的产品的描述，这很棒。问题是，此后的每个帖子也都显示相同的描述，无论该帖子甚至是否有与之关联的产品。

任何正确显示此内容的指导将不胜感激！

如何在AngularFire Infinite Scroll中的可观察对象中创建可观察对象

0 个答案: