如何使用 AngularFire、Firestore 和 Firebase 分页到上一页 [英] How to paginate to previous page using AngularFire, Firestore and Firebase

问题描述

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

Sorry I have seen this question has been asked many times in different ways here such as:

• 如何分页返回到 Angular(6) 和 firebase Firestore 设置中的前几页
• 如何按单个页面对 Firestore 数据集进行分页?

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

But NONE of the answers really explain the solution or are understandable.

我还看了很多教程，例如:

Also I went though many tutorials such as:

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

详情:

这是我到目前为止所做的

So here is what I have done so far

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) 不会在该文档之前结束，我认为它已达到限制.

query = query.endBefore(endBefore) does not end before that document I think it ends up to the limit.

推荐答案

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

As of firebase@7.3.0 you can use the Query.limitToLast(n: number) method - makes it much easier to move backward with paginated data.

您的实施细节可能如下所示:

Your implementation details might look something like this:

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

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

这篇关于如何使用 AngularFire、Firestore 和 Firebase 分页到上一页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！