使用AngularFire2进行分页

时间:2016-09-28 08:43:36

标签: firebase pagination firebase-realtime-database angularfire angularfire2

我正在构建一个使用Firebase的Ionic2项目,而我正在使用AngularFire2。

从AngularFire2文档中,我得到了类似的内容:

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

这很有效。我有大约300-400条记录,但我无法在一次API调用中完成所有操作。所以我试图实现分页。我尝试了很多东西。我想要实现的是this

StartAt(), endAt()

我试图通过查询对象传递它,但它没有用。 AngularFire2是否有此实现? 如果没有,我如何获得Firebase参考,以便我可以编写自己的实现?

3 个答案:

答案 0 :(得分:4)

我最近在blog post中查看了这个问题,但是你提出了一个有趣的边缘情况,你的总查询量将超过你想要的数量。我会用与以前相同的方法解决这个问题,但是实现start at和end而不是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());

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

答案 1 :(得分:1)

AngularFire2根据source code支持startAtendAt。以下是基于具有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' } });

答案 2 :(得分:0)

我还需要使用Angular 2和Firebase进行简单的分页(Next和Previous)。

我的解决方案是查询列表itemPerPage + 1中的额外项目并将其作为参考。然后使用startAtendAt选项,我可以使用参考项在我的数据中找到下一页和上一页。

我创建了一个Gist来展示我的解决方案,希望它可以提供帮助。