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

Posted 2023-02-22

【中文标题】如何使用 AngularFire、Firestore 和 Firebase 分页到上一页

【英文标题】：How to paginate to previous page using AngularFire, Firestore and Firebase

【发布时间】：2019-06-02 02:28:16

【问题描述】：

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

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

【参考方案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);

【讨论】：

你认为这应该是正确的答案吗？我问是因为我还没有尝试过这个，我不知道这是否有任何差异和最重要的限制。

无需更改，我只是想确保该选项显示在此处，因为它是 SDK 中的全新功能。仅适用于 7.3 或更高版本的应用。

我会等一段时间，让用户抚养你，然后我会改变这个，所以我们可以覆盖我认为很大一部分帮助

limitToLast() 为我做了诀窍（导航到上一页）。

我做了这个正确的答案，因为你得到了人们的选择：-D 谢谢你：-D

【参考方案2】：

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

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

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

您的页面限制为 2 个结果

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

E,
F

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

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

【讨论】：

@f.khantsis 嘿！末日777？来自 AGM 地图？ Dimitrios kanellopoulos 我们在这里谈过。这很浪费时间，更糟糕的是，firebase 团队不帮助处理这些查询。

感谢您的想法。我正在努力实现这一目标。

嘿@JimmyKane，很好的答案！他们甚至不想将其视为“问题”：github.com/firebase/firebase-js-sdk/issues/479 虽然我知道他们的 NoSQL 数据库结构不能完全处理这种方法，但他们至少应该就如何以体面的方式解决这个问题发表意见，但他们更愿意简单地接受“Firestore 不是您的数据库”这一事实，这很糟糕，因为在 Firebase 中，没有 SQL 替代方案（或其他可以处理这种方法的 NoSQL）。

感谢 Jimmy，我也将您的逻辑应用到了我的 vuexfire 应用程序中。唯一需要注意的是如何使用文档快照对象（不是数组）完成第 4 步反转数组

试图为 firestore 应用程序实现分页，并遇到了这个解决方案并对其进行了进一步研究。我想说，虽然这是一个可行的解决方案，但您可以非常轻松地超出您的使用限制。假设您在集合中有100 文档，每页显示10 文档，您现在位于最后一页。执行上一页意味着您将执行 90 读取只是为了转到上一页。使用1000 文档，将读取990。你明白我的意思。所以请注意是否有人要以这种方式实现分页。