Firestore + AngularFire2 分页(按范围查询项目 - .startAfter(lastVisible) ) [英] Firestore + AngularFire2 pagination ( query items by range - .startAfter(lastVisible) )
本文介绍了Firestore + AngularFire2 分页(按范围查询项目 - .startAfter(lastVisible) )的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在一个组件中,我想从 FireStore 中提取一系列项目,例如.从 0 到 5,从 5 到 10 等等.我找到了 this 在 FireStore 的文档中,但他们不使用 AngularFire2,所以我越努力尝试重构,因为我得到了更大的混乱.我通过简单的 splice()
'ing 使它工作:
In a component I want to pull a range of items from FireStore, for ex. from 0 to 5, from 5 to 10 etc. I found this in FireStore's docs, but they dont use AngularFire2 so as harder I tried to refactor as bigger mess I got. I made it working by simply splice()
'ing:
service ->
topFirstScores(): AngularFirestoreCollection<Score> {
return this.fireRef.collection('scores', r => r
.orderBy('score', 'desc').limit(6)
);
}
component ->
$scores = new Subject();
this.scores$ = this.$scores.asObservable();
if (this.scores === 'first') {
this.scoreS.topFirstScores().valueChanges().take(1)
.subscribe(_ => this.$scores.next(_.splice(0, 3)))
} else {
this.scoreS.topFirstScores().valueChanges().take(1)
.subscribe(_ => this.$scores.next(_.splice(3, 3)))
}
但这似乎更像是一种解决方法.谁能翻译一下:
But this seems more as a workaround. Could anyone translate this:
var first = db.collection("cities")
.orderBy("population")
.limit(25);
return first.get().then(function (documentSnapshots) {
// Get the last visible document
var lastVisible = documentSnapshots.docs[documentSnapshots.docs.length-1];
console.log("last", lastVisible);
// Construct a new query starting at this document,
// get the next 25 cities.
var next = db.collection("cities")
.orderBy("population")
.startAfter(lastVisible)
.limit(25);
});
最好返回 AngularFirestoreCollection
?
推荐答案
我遇到了同样的问题,这就是我所做的.
I had the same Problem and this is what i did.
private _data: BehaviorSubject<Scores[]>;
public data: Observable<Scores[]>;
latestEntry: any;
constructor(private afs: AngularFirestore) {}
// You need to return the doc to get the current cursor.
getCollection(ref, queryFn?): Observable<any[]> {
return this.afs.collection(ref, queryFn).snapshotChanges().map(actions => {
return actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
const doc = a.payload.doc;
return { id, ...data, doc };
});
});
}
// In your first query you subscribe to the collection and save the latest entry
first() {
this._data = new BehaviorSubject([]);
this.data = this._data.asObservable();
const scoresRef = this.getCollection('scores', ref => ref
.orderBy('score', 'desc')
.limit(6))
.subscribe(data => {
this.latestEntry = data[data.length - 1].doc;
this._data.next(data);
});
}
next() {
const scoresRef = this.getCollection('scores', ref => ref
.orderBy('scores', 'desc')
// Now you can use the latestEntry to query with startAfter
.startAfter(this.latestEntry)
.limit(6))
.subscribe(data => {
if (data.length) {
// And save it again for more queries
this.latestEntry = data[data.length - 1].doc;
this._data.next(data);
}
});
}
组件
scores$: Observable<Scores[]>;
...
ngOnInit() {
this.yourService.first();
this.scores$ = this.yourService.data;
}
nextPage() {
this.yourService.next();
}
这篇关于Firestore + AngularFire2 分页(按范围查询项目 - .startAfter(lastVisible) )的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文