我正在构建一个使用Firebase的Ionic2项目,而我正在使用AngularFire2。
从AngularFire2文档中,我得到了类似的内容:
const queryObservable = af.database.list('/items', {
query: {
orderByChild: 'size',
equalTo: subject
}
});
这很有效。我有大约300-400条记录,但我无法在一次API调用中完成所有操作。所以我试图实现分页。我尝试了很多东西。我想要实现的是this:
StartAt(), endAt()
我试图通过查询对象传递它,但它没有用。 AngularFire2是否有此实现? 如果没有,我如何获得Firebase参考,以便我可以编写自己的实现?
答案 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支持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' } });
答案 2 :(得分:0)
我还需要使用Angular 2和Firebase进行简单的分页(Next和Previous)。
我的解决方案是查询列表itemPerPage + 1
中的额外项目并将其作为参考。然后使用startAt
和endAt
选项,我可以使用参考项在我的数据中找到下一页和上一页。
我创建了一个Gist来展示我的解决方案,希望它可以提供帮助。