javascript - Firestore : How can I re-order a collection I already have a reference to?

标签 javascript angular firebase google-cloud-firestore angularfire2

有没有办法保留同一集合的引用,但使用 firestore 更改顺序?

TLDR:这就像我要实现的功能: https://stackoverflow.com/a/17320018 , 但由于我的数据来自 firestore,我还没有找到动态完成此操作的正确方法。


假设我有一个 messagesService.ts,它包含消息集合和对消息 Observable 的引用:

messagesCollection: AngularFirestoreCollection<Message>
messages: Observable<Message[]>;

this.messagesCollection = this.db.collection('messages', ref => {
  return ref.orderBy('dateCreated', 'desc');
});

this.messages= this.messagesCollection.valueChanges();

当我将此数据弹出到 *ngFor="let message of messages | async" 时,它会按预期在顶部显示最新消息。

我需要帮助的地方:

我希望能够单击一个按钮并更改消息的顺序(或我从 firestore 获得的数据的顺序)。例如,您可以单击一个按钮,按点赞次数最多、观看次数最多、最旧的消息、按字母顺序排列的消息等进行排序。我是否需要为我想要对同一集合进行排序的每一种方式提供单独的引用?这看起来很草率,是否有更简洁的动态方式来执行此操作?

最初,我尝试过这样的事情:

sortMessagesBy(field) {
    this.messagesCollection = this.db.collection('messages', ref => {
          return ref.orderBy(field, 'desc');
    });
}

但是,这没有用,因为它似乎更改了对集合的引用,所以可观察到的消息没有更新。

接下来,我尝试了这个:

sortMessagesBy(field) {
    this.messagesCollection = this.db.collection('messages', ref => {
          return ref.orderBy(field, 'desc');
    });
    this.messages= this.messagesCollection.valueChanges();
    return this.messages;
}

但这似乎创建了一个新的 this.messages 对象,它使 ngFor 重新呈现整个页面并且看起来非常草率(即使在使用 trackBy 时)。

最终,我想进一步缩小范围,在同一个集合中,我什至可能有一个 where 子句来定位特定的消息子集,并能够应用相同的动态排序同样,I.E.:

this.messagesCollection = this.db.collection('messages', ref => {
      return ref.where("type", "==", "todo").orderBy(field, 'desc');
});

而且我只是不知道如何在不弄清楚如何动态地做到这一点的情况下做到这一点。

最佳答案

据我所知AngularFirestoreCollection class是不可变的。这意味着您无法在构建后更改它。

这与 Firebase SDK 类一致。这段代码

ref.where("type", "==", "todo").orderBy(field, 'desc')

创建一个 Query object ,这也是不可变的。要更改结果的顺序,您必须创建一个新查询和一个新的 AngularFirestoreCollection

关于javascript - Firestore : How can I re-order a collection I already have a reference to?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49525386/

相关文章:

javascript - Angular 5 : Prevent to reload tab content when changing between tabs

angular - 使用@angular/service-worker 缓存 Google Maps API

firebase - 为新用户创建 Firebase 受众

javascript - 在函数中处理异步调用 (Firebase)

javascript - 如何处理大量数据 - 元素周期表和元素

javascript - 了解测试中的过滤器注入(inject)

javascript - 有效评估 JavaScript 对象是否包含字符串

javascript - 在 Angular UI-Grid 中交换数据,在外部更改数据集时新列不可见

html - 浏览器如何解释非标准/自定义 html 标签

javascript - 如何删除路径在实时数据库中的文件?