相关疑难解决方法(0)

Firestore 分页:当使用 orderBy() 降序时,startAfter() 不返回任何数据,但适用于升序

语境

这是第一个问题,所以提前感谢大家,如果您需要其他任何信息来帮助回答我的问题,请告诉我!

我正在创建 HTML 卡的排序列表。这些卡从 Firestore 文档中提取数据,每个文档都具有元数据:numViews 和摘要。

我一次加载 5 张卡片的分页数据,并且想要一个“加载更多”按钮来显示接下来的 5 张卡片。

我正在关注本教程:https://youtu.be/vYBc7Le5G6s? t=797(时间戳记到 orderBy、限制和创建“加载更多”按钮的部分)。

不确定它是否相关,但我最终打算使其成为无限滚动,最好使用相同的教程。

问题

我有一个工作解决方案(与教程完全相同),用于按升序排序(见下文))。它为浏览次数最少的文档创建卡片,当您向下滚动页面时,浏览次数会增加。加载更多按钮会创建接下来的 5 张卡片。

当我更改为 orderBy() 降序时,不会加载任何卡片。当我将分页从 startAfter() 更改为 endBefore() 和 orderBy(descending) 时,它会通过正确降序对前 5 个进行排序(从最高视图开始,并在向下滚动页面时降序),但“加载更多”按钮只是重新加载相同的 5 张卡,而不是接下来的 5 张。

这是我的代码

// References an empty container where my cards go
const container = document.querySelector('.containerload');

// Store last document
let latestDoc = null;

const getNextReviews = async () => {
  // WORKING ascending
  var load = query(colRef, orderBy('numViews', 'asc'), startAfter(latestDoc || 0), limit(5))

  // …
Run Code Online (Sandbox Code Playgroud)

html javascript sorting firebase google-cloud-firestore

8
推荐指数
1
解决办法
2544
查看次数

Firestore + AngularFire2 分页(按范围查询项目 - .startAfter(lastVisible) )

在一个组件中,我想从 FireStore 中提取一系列项目,例如。从 0 到 5,从 5 到 10 等等。我在 FireStore 的文档中找到了这个,但是他们不使用 AngularFire2,所以我尝试重构时变得更加混乱。我通过简单的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)))
}
Run Code Online (Sandbox Code Playgroud)

但这似乎更像是一种解决方法。谁能翻译一下:

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]; …
Run Code Online (Sandbox Code Playgroud)

rxjs angularfire2 angular google-cloud-firestore

6
推荐指数
1
解决办法
7131
查看次数