angular - 如何使用 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);
}