如何使用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数据集进行分页?

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

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

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

• 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.

推荐答案

所以我认为我是通过受上述github问题启发的评论解决了这个问题:

So I think I solved it by a comment inspired by the github issue mentioned above:

假设您有此数组，并且您正在按升序排序

Supposing you have this array and you are sorting ascending

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

您的页面限制为2个结果

And you have a page limnit of 2 results

然后，当您进入第三页时，您应该拥有

Then when you are in the third page you should have

E,
F

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

Now you need to go to previous page and what you need todo is:

1. 颠倒排序顺序，我们的数据应为[F,E,D,C,B,A]
2. 从当前浏览页面的第一个文档开始(在我们的示例中为E)
3. 查询消防站以获取结果(例如，限制为2).您应该获得相反的顺序，并从E开始，即[D,C]
4. 颠倒上述数组，因此它将为[C,D]
5. 完成

1. Reverse the sorting order and our data should be [F,E,D,C,B,A]
2. startAfter the first document of the currently viewed page (in our case E)
3. Query the firestore to get the results (eg with your limit of 2). You should get with reverse order and starting after E and that is [D,C]
4. Reverse the above array so it will be [C,D]
5. Done

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