如何使用 AngularFire、Firestore 和 Firebase 分页到上一页

Question

对不起，我看到这个问题在这里以不同的方式被问过很多次，例如：

• Howto paginate back to previous pages in a Angular(6) and firebase Firestore setup
• How to paginate Firestore dataset by individual page?

但没有一个答案能真正解释解决方案或可以理解。

我还阅读了许多教程，例如：

• https://howtofirebase.com/firebase-data-structures-pagination-96c16ffdb5ca
• https://rexrainbow.github.io/phaser3-rex-notes/docs/site/firebase-firestore/#paginate

至详情：

这就是我到目前为止所做的事情

let query = ref.orderBy(orderBy, asc ? 'asc' : 'desc').limit(limit);
        if (startAfter) {
          // Thiis works as it should
          query = query.startAfter(startAfter);
        }
        if (endBefore) {
          // This here does not work or give the correct results. I get the first page. 
          query = query.endBefore(endBefore);
        }
        return query;

所以：

query = query.startAfter(startAfter); 按预期工作。

但是：

query = query.endBefore(endBefore) 不会在该文档之前结束，我认为它会达到极限。

Answer 1

从firebase@7.3.0 开始，您可以使用Query.limitToLast(n: number) 方法 - 使用分页数据更容易向后移动。

您的实现细节可能如下所示：

function nextPage(last) {
   return ref.orderBy('age').startAfter(last.age).limit(3);
}

function prevPage(first) {
   return ref.orderBy('age').endBefore(first.age).limitToLast(3);
}

Answer 2

所以我想我是通过上面提到的 github 问题启发的评论解决了这个问题：

假设你有这个数组并且你正在升序排序

A,
B, 
C,
D,
E,
F, 

您的页面限制为 2 个结果

那么当你在第三页时你应该有

E,
F

现在您需要转到上一页，您需要做的是：

1. 颠倒排序，我们的数据应该是[F,E,D,C,B,A]
2. startAfter 当前查看页面的第一个文档（在我们的例子中是 E）
3. 查询 Firestore 以获取结果（例如，您的限制为 2）。您应该以相反的顺序获得并在E 之后开始，即[D,C]
4. 反转上面的数组，这样它就是[C,D]
5. 完成