按照火力文档,这是如何做到这一点:
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);
});
但问题是,我看不出有任何使用get功能,甚至使用snapshotChanges()
得到的长度,然后减去它被用作未来获得的参照。任何提示将非常感谢!
更新:
我试图手动输入索引,但无济于事,因为它返回一个不带数据的数组。
getNewsCollectionNext() {
this.newsCollectionRef = this.afDB.collection('news', ref =>
ref.where('news_is_deleted', '==', false).orderBy('news_timestamp_post_created', 'desc')
.startAfter(1));
this.newsCollection = this.newsCollectionRef.snapshotChanges().pipe(
map(actions => actions.map(a => {
const data = a.payload.doc.data() as News;
const id = a.payload.doc.id;
return { id, ...data };
}))
);
return this.newsCollection;
}
虽然这个方法返回3项
getNewsCollection() {
this.newsCollectionRef = this.afDB.collection('news', ref =>
ref.where('news_is_deleted', '==', false).orderBy('news_timestamp_post_created', 'desc'));
this.newsCollection = this.newsCollectionRef.snapshotChanges().pipe(
map(actions => actions.map(a => {
const data = a.payload.doc.data() as News;
const id = a.payload.doc.id;
return { id, ...data };
}))
);
return this.newsCollection;
// console.log(this.newsList);
}
更新2:我做了“next”函数的工作!
TL;博士:所以我所做的就是解开了文档的有效载荷和改变了我观察到的类型,任何预防冲突:)因此,这里是我的代码在服务
getNewsCollection() {
this.newsCollectionSubscription = this.newsService.getNewsCollection().
subscribe(newsCollection => {
this.newsCollection = newsCollection;
console.log('t2est',newsCollection[newsCollection.length - 1].doc);
if(newsCollection){
this.snapshot = newsCollection[newsCollection.length - 1].doc;
}
});
}
getNextNewsCollection() {
this.newsCollectionSubscription = this.newsService.getNextNewsCollection(this.snapshot).
subscribe(newsCollection => {
this.newsCollection = newsCollection;
// console.log('t2est',newsCollection[1].doc);
console.log(newsCollection);
});
}
在我的新闻card.component.ts
getNewsCollection() {
this.newsCollectionSubscription = this.newsService.getNewsCollection().
subscribe(newsCollection => {
this.newsCollection = newsCollection;
console.log('t2est',newsCollection[newsCollection.length - 1].doc);
if(newsCollection){
this.snapshot = newsCollection[newsCollection.length - 1].doc;
}
});
}
getNextNewsCollection() {
this.newsCollectionSubscription = this.newsService.getNextNewsCollection(this.snapshot).
subscribe(newsCollection => {
this.newsCollection = newsCollection;
// console.log('t2est',newsCollection[1].doc);
console.log(newsCollection);
});
}
有一个看看下面的HTML页面,显示(以纯JavaScript)如何修改query
为了通过页面显示的文件页面。
你可以将其下载到本地文件夹/目录,调整配置对象,并用浏览器打开它。点击按钮将通过3显示,在控制台中,原稿3。
需要注意的是,在这个简单的POC,没有错误处理当分页到达集合的末尾。
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/5.5.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.3/firebase-firestore.js"></script>
</head>
<body>
<button id="myBtn">Display next subset</button>
<script>
document.getElementById("myBtn").addEventListener("click", function () {
displayNextPaginationSubset();
});
// Initialize Firebase
var config = {
apiKey: "....",
authDomain: "....",
databaseURL: "....",
projectId: "...."
};
firebase.initializeApp(config);
var db = firebase.firestore();
var query = db.collection("cities")
.orderBy("population")
.limit(3);
function displayNextPaginationSubset() {
query.get().then(function (documentSnapshots) {
documentSnapshots.forEach(function(doc) {
// doc.data() is never undefined for query doc snapshots
console.log(doc.id, " => ", doc.data());
});
// 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 3 cities.
query = db.collection("cities")
.orderBy("population")
.startAfter(lastVisible)
.limit(3);
});
}
</script>
</body>
</html>