使用AngularFire2分页

Question

我正在构建一个Ionic2项目，它使用Firebase，我正在使用AngularFire2。

从AngularFire2文档中，我可以得到如下内容：

const queryObservable = af.database.list('/items', {
  query: {
    orderByChild: 'size',
    equalTo: subject 
  }
});

这个效果很好。我有大约300-400张记录，但我不能在一个API调用中将其全部提取出来。所以我正在尝试实现分页。我试过很多东西。我想实现的是这

StartAt(), endAt()

我试图通过查询对象传递它，但是它没有工作。AngularFire2有这样的实现吗？如果不是，我如何获得Firebase ref，以便我可以编写自己的实现？

Answer 1

AngularFire2确实支持startAt和endAt，根据他们的源代码。下面是如何根据带有size子键的列表限制查询

let queryObservable = this.af.database.list('/items', {
  query: {
    orderByChild: 'size',
    startAt: 50,
    endAt: 100
  }
});

这应该会拉出所有具有size子键的项，该子键的定义在50到100之间。

注意到我注意到如果要将引用对象传入AngularFire2而不是引用路径，查询将NOT工作！因此，下面的代码仍将返回项目列表，但不会正确排序。

let ref = firebase.database().ref('/items');
this.af.database(ref, { query: { orderByChild: 'size' } });

Answer 2

最近，我在一个博客帖子中查看了这个问题，但是您提出了一个有趣的边缘情况，在这种情况下，您的总查询将比您想要的要大。我会用和以前一样的方法来解决这个问题，但是实现一个开始和结束，而不是一个limitToLast。另外，您使用从rxjs导入的BehaviorSubjects，因为它们将允许您获得一定数量的当前值和增量。示例

let firstKey = new BehaviorSubject(''); // import 'rxjs/BehaviorSubject'
let nextKey = new BehaviorSubject('');
let pageSize = new BehaviorSubject(10);

let queryObservable = this.af.database.list('/items', {
 query: {
   orderByKey: true,
   startAt: firstKey,
   limitToFirst: pageSize
 }
});

现在，您有一个不断移动的窗口，从第一个键开始，并使用这些键作为排序的值。例如，为了能够更改密钥，您需要将所需的密钥存储在特定的位置。

queryObservable.subscribe((data) => {
    // angularfire2 adds a $key property to each result in an array
    // Does not handle the edge case at the end of the list
  if (data.length === pageSize.getValue()) {
    nextKey.next(data.$key);
  }
});

若要增加和减少窗口，只需将firstKey值更改为nextKey值。

firstKey.next(nextKey.getValue());

您可以做各种整洁的事情，比如添加多个页面，或者对这个方法做一些小小的调整。这与在数据库中添加必须维护的字段相反，在某些情况下，这些字段可能很麻烦。

Answer 3

我还需要使用角2和Firebase进行简单的分页(下一页和前一页)。

我的解决方案是从列表itemPerPage + 1中查询一个额外的项，并将其作为参考。然后，使用startAt和endAt选项，我可以用引用项对我的数据进行下一页和前一页。

我创建了一个要旨来展示我的解决方案，希望它能有所帮助。