个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
根据 firebase 文档，这是如何做到的:
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:我让“下一个”功能起作用了!
tl;dr:所以我所做的就是打开文档payload 并将我的可观察类型更改为 any 以防止冲突:)所以这是我在服务中的代码
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);
});
}
在我的 news-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>
关于javascript - Angularfire2，startAfter()不适用于分页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52736962/
25
4
0
根据 firebase 文档，这是如何做到的: var first = db.collection("cities") .orderBy("population") .
这就是我在 postsList 中获取数据的方式。如何查询数据以在我得到的列表中的最后一个文档之后开始。我在此处的“startAfter()”中准确地写了什么以获得在上一个列表之后开始的下一组列表。请
我遇到了这个问题，我无法让 startAfter 处理我在 Firestore 中的数据。 我给出了这两个问题的例子，第一个图像工作时，使用属性(createdAt)过滤，第二个传递整个文档返回空并且
我正在尝试获取存储桶中某个标识符之后的所有文件。 这是我的代码，省略了不相关的部分。 require_once LIB . DS . 'Aws/vendor/autoload.php'; use Aw
我正在使用 Ionic 上的 Firestore 编写一个按时间顺序排列的用户帖子(最新帖子在顶部)的个人资料页面，方法是将 orderBy() 设置为“timestamp”下降。当用户到达底部时，我
我正在使用 firebase firestore 作为我的数据库，并且我编写了 firebase 函数来从 firestore 数据库中检索数据。 我想要实现的是分页，并且根据文档，我已经为我的 fi
我创建了一个类似应用程序的测验，其中一次提取 10 个问题。如果用户得到 8 分(满分 10 分)，那么我将获取接下来的 10 个问题。但是 startAfter 总是给出相同的响应。 val que
我的 firestore 数据库中保存了一份报价/交易列表。我想获取按降序折扣排序的前 3 笔交易，即折扣最高的交易排在第一位，然后是次高的，依此类推。我以 3 段为单位获取它们。 我正在尝试使用 a
在一个组件中，我想从 FireStore 中提取一系列项目，例如。从 0 到 5，从 5 到 10 等等。我找到了 this在 FireStore 的文档中，但他们不使用 AngularFire2，所
我正在使用 Flutter (cloud_firestore) 并尝试在标题为 'xxx' 的文档之后从 Firestore 获取数据，但它返回 0 个结果。 return Firestore.ins
我已经寻找这个有一段时间了，但没有找到为什么会这样的原因。 基本上，这会返回集合中的文档数组。 this.db.collection('people', ref => { return ref
我正在尝试使用 Firebase Firestore startAfter() 和 limit() 查询方法实现分页系统。第一个查询成功返回，但第二个查询返回空快照。 这是我的 getNextPage
我正在尝试查询 firestore 中的列表，该列表应按降序日期属性排序，并使用 startAfter 游标对结果进行分页。 正如您在下面的代码片段中所看到的，一旦我将 orderBy('date',
我正在使用 Aws::S3::Model::ListObjectsV2Request列出 AWS s3 中的对象。 (它是 c++ sdk，但我想实现与 Java 相同，所以如果您熟悉 Java AW
我是一名优秀的程序员,十分优秀！