Firestore:如何重新订购我已经参考过的集合?

2024-05-02

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

TLDR:这就像我想要实现的功能:https://stackoverflow.com/a/17320018 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 子句来定位特定的消息子集,并且也能够应用相同的动态排序,即:

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

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


据我所知AngularFirestoreCollection class https://github.com/angular/angularfire2/blob/master/src/firestore/collection/collection.ts是不可变的。这意味着构建完成后您无法更改它。

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

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

创建一个Query object https://firebase.google.com/docs/reference/js/firebase.firestore.Query,这也是不可变的。要更改结果的顺序,您必须创建一个新的查询和一个新的AngularFirestoreCollection.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Firestore:如何重新订购我已经参考过的集合? 的相关文章

  • Javascript DOM setAttribute 在函数调用中不起作用

    我有一个带有输入元素的 HTML 文件 我希望向其中添加一个名为 valid fieldset011 的新属性 该属性用作 AngularJS 验证器的链接 输入元素具有属性 id fieldset011 如果我使用以下脚本 包含在脚本标签
  • 在 javascript、jQuery 或 css 中,如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example
  • 如何防止 gulp-notify 破坏 Windows 中的 gulp-watch?

    我正在使用吞咽通知 https www npmjs org package gulp notify插入 这是我如何在 gulpfile js 中实现它的示例 您可以看到我也在使用 gutil 和 livereload 我不知道它们是否发挥任
  • Angular 6 中的 Http 错误处理

    我正在尝试使用 Angular 6 中的以下类来处理 http 错误 我从服务器收到 401 未经授权状态 但我没有看到控制台错误消息 HttpErrorsHandler ts 文件 import ErrorHandler Injectab
  • 在鼠标光标位置添加 cytoscape 节点

    我想在画布上的单击事件上的鼠标箭头位置添加一个 cytoscape 节点 我怎样才能做到这一点 我的方法 效果不太好 我可以通过单击创建一个节点 但无法确保创建的节点的位置位于我单击的位置 使用这样的东西 cy click function
  • FakeAsync/tick (Async/whenStable) 与 detectorChanges()

    您能帮我区分这两件事吗 根据我的理解 如果你只使用 observable 你可以使用 detectorChanges 因此 您可以直接更改组件属性或监视服务调用并返回可观察的值 然后调用 detectorChanges 更改将在 html
  • Angular 5 Http拦截器刷新JWT令牌

    我已经实现了令牌保存 检索的逻辑 并且我也有刷新调用 问题是 当我在 HttpInterceptor 中拦截 403 时 同时进行的其他调用也会刷新令牌 我很乐意保留这些调用 直到我的令牌刷新为止 创建我所说的请求 信号量 Injectab
  • 循环遍历元素并逐步为每个元素应用 CSS 规则

    我有一个网格布局 每个网格布局中都有不同数量的元素 我想动态添加内联grid column通过循环遍历 div 中存在的每个元素的 CSS 规则 ul 与一类 list 所以 HTML 代码的输出需要是 ul class list ul u
  • console.log() 显示同一对象属性的矛盾值

    我想我可能要疯了 我使用 console log 来查看对象的状态 然后在下一行对同一对象的特定属性执行 console log 并为每个属性获取不同的值 我正在使用的代码是 console log this pictures Items
  • ToggleClass 动画 jQuery?

    我的网站上有一个部分 当用户单击时我希望它展开 我正在使用 jQuerytoggleClass为了这 expandable function e e preventDefault this closest article toggleCla
  • 为什么将 x 和 y 设置为 0 时 svg 文本会消失?

    我刚刚开始阅读有关svg我提出了以下问题 我正在创建一个简单的svg with a text里面如下图所示 从我的阅读中我了解到x and y of the text标签声明文本在标签内的位置svg space 为什么当我同时设置x and
  • Angular 2 获取当前路线

    所以我需要以某种方式检查我是否在主页上执行某些操作 而在其他页面上则不执行此操作 该组件也在所有页面上导入 如果我在主页上 如何检测该组件 Thanks 尝试这个 import Router from angular router expo
  • 如何打开弹出窗口并用父窗口中的数据填充它?

    如何使用 JavaScript jQuery 使用父页面中 JS 变量的数据填充弹出窗口 在我的示例中 我有一个文件名数组 我在父窗口中最多列出五个 如果还有更多 我想提供一个链接来打开弹出窗口并列出数组中的每个帖子 因此 如果我打开一个包
  • 禁用特定 div 上的 Tab 键

    我有以下结构 div div Some content div div Some content div div 我想 禁用 div2 上的 tab 键 我的意思是按下 tab 键时 div2 的元素不会获得焦点 有没有简单的方法可以使用
  • Node.js 未处理的“错误”事件

    我编写了一个简单的代码并将其保存在文件 try js 中 var http require http var makeRequest function message var options host localhost port 8080
  • 从 DirectionsRenderer 中获取折线或标记的事件

    我正在使用 DirectionsService 和路线方法来生成 DirectionsResult 我还使用 DirectionsRenderer 对象来显示结果 因为它非常易于使用 我在检测 Directions changed 事件时没
  • MongoDB中如何通过引用字段进行查询?

    我有两个 Mongo 模式 User id ObjectId name String country ObjectId Reference to schema Country Country id ObjectId name String
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • 如何使用 jQuery 或 JavaScript 聚焦 或 标签?

    for var i 0 i
  • Internet Explorer 9 是否会因数组和对象文字末尾的额外逗号而卡住?

    现代浏览器和 Node js 等环境允许您说 a 1 b 2 或 1 2 3 这在历史上一直是 Internet Explorer 的问题 Internet Explorer 9 中修复了此问题吗 对此有两种不同的答案 一种是对象初始值设定

随机推荐

  • 为什么我的 Visual Studio .obj 文件比输出的 .exe 文件大?

    作为背景 我是一个开源项目的开发人员 一个名为开放框架 http www openframeworks cc 这是不同库的包装器 例如 opengl quicktime freeImage 等 在下一个版本中 我们添加了一个名为 POCO
  • 在内核 OpenCL 中实现 FIFO 的最佳方法

    目标 在 OpenCL 中实现下图所示 OpenCl 内核所需的主要内容是将系数数组和临时数组相乘 然后最后将所有这些值累加为 1 这可能是最耗时的操作 并行性在这里非常有帮助 我正在为内核使用一个辅助函数来执行乘法和加法 我希望这个函数也
  • 限制文本框中每行的最大字符数

    假设我有以下内容
  • 如何创建“抽象字段”?

    我知道java中不存在抽象字段 我也读过这个问题 https stackoverflow com questions 2211002 why not abstract fields但提出的解决方案并不能解决我的问题 也许没有解决方案 但值得
  • 确定性时的虚函数开销 (c++)

    我知道虚拟函数本质上是包含在 vtable 中的函数指针 这使得多态调用由于间接等原因而变慢 但我想知道当调用是确定性时编译器的优化 我所说的确定性是指以下情况 该对象是一个值而不是引用 因此不可能存在多态性 struct Foo virt
  • Tensorflow:np数组的next_batch函数

    我的火车数据为 xTrain numpy asarray 100 1 5 6 yTrain numpy asarray 200 2 10 12 如何定义 next batch size 方法以从训练数据中获取随机元素的 size 个数 您可
  • 在 numpy 中索引多个不相邻的范围

    我想从一维 numpy 数组 或向量 中选择多个不相邻的范围 Suppose gt gt gt idx np random randint 100 size 10 array 82 9 11 94 31 87 43 77 49 50 当然
  • 自动订阅应用内购买:恢复后续续订

    根据 Apple 应用内购买编程指南 App Store 每次续订订阅时都会创建一个单独的交易 当您的应用程序恢复以前的购买时 Store Kit 会将每笔交易传送到您的应用程序 假设我的应用程序订阅仅限客户端 无服务器组件 验证后续续订是
  • { [FacebookTokenError:此授权码已被使用。]

    我有一个航行应用程序 我正在尝试实现 Facebook 登录 当我单击 使用 facebook 登录 按钮时 出现此错误 error A server error occurred in a request error FacebookTo
  • PHP cURL:CURLOPT_CONNECTTIMEOUT 与 CURLOPT_TIMEOUT

    PHP 有以下两个与超时相关的选项 CURLOPT CONNECTTIMEOUT and CURLOPT TIMEOUT PHP 网站上的描述有点模糊 有什么不同 使用现实世界的示例 假设您通过 cURL 将 GET 变量发送到 URL 并
  • 有没有办法理解安装错误代码的实际含义?

    我正在尝试应用内更新功能 但收到 FAILED 安装状态和 100 安装错误代码 有什么办法让我知道可能是什么原因造成的吗 我实现了灵活的应用内更新 并记录了每个步骤 遵循 Android 开发者教程here https developer
  • jQuery 自动完成标记插件,如 StackOverflow 的输入标记? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 哪些解决方案可以实现与 SO 用于输入标签相同的自动完成功能 有可以处理一个单词的插件 但我还没有看到
  • 需要从表单生成的工作表中移动行

    我有一个调查表 我需要我的团队查看一次 但之后我希望我的团队将其设置为 已关闭 的行保存到存档表中 过去 我在其他工作表中使用过此脚本 但它似乎不适用于表单链接工作表 经过研究 我发现您无法从表单链接表中剪切 但可以删除行 我的理论是脚本正
  • 当implicitly_wait不起作用时使用find_element_by_link_text出现NoSuchElement异常?

    python 和 Selenium 以及相关编程的新手 我正在尝试自动化硒以点击特定链接 在本例中 我希望它点击与链接文本 B 关联的链接 li a href B a 在这个网站上 http www lw com http www lw c
  • Azure 中的 ASP.NET MVC 4 和 Web API - 未找到 HTTP 资源

    使用 Visual Studio 2012 我创建了一个简单的 Windows Azure 项目 云项目 其中包含 ASP NET MVC 4 网站 我没有对模板进行任何更改 我只是尝试使用Azure 网站 https www window
  • 在 Laravel 5.1 中将模型保存到数据库之前执行一些操作

    在 Laravel 5 1 模型中 在将数据写入数据库之前 我该如何做一些事情 例如修改某些数据字段或进行更多验证 关于该问题的文档很难在实际应用中使用 http laravel com docs 5 1 eloquent events h
  • SwiftUI 双向绑定到枚举案例中 ObservableObject 内的值

    我正在尝试观察 a 的变化bool包含在一个值ObservableObject这是一个值enum案件 这是我想要实现的目标的示例 但使用当前的方法我收到错误Use of unresolved identifier type1Value im
  • ASP.NET MVC - 角色提供程序的替代方案?

    我试图避免使用角色提供程序和成员资格提供程序 因为在我看来它太笨拙了 因此我试图制作自己的 版本 它不那么笨拙并且更易于管理 灵活 现在我的问题是 除了角色提供者之外 还有其他不错的选择吗 我知道我可以自定义角色提供者 会员提供者等 通过更
  • 在 HTML 画布上绘制线宽连续变化的线条

    我试图画一条线 从一条细线开始 然后逐渐加宽直到结束 我需要绘制半平滑曲线 由几条直线合成 并且在寻找解决此任务的方法时遇到问题 这个小提琴显示了我的问题 http jsfiddle net ZvuQG 1 http jsfiddle ne
  • Firestore:如何重新订购我已经参考过的集合?

    有没有办法保留同一集合的引用 但使用 firestore 更改顺序 TLDR 这就像我想要实现的功能 https stackoverflow com a 17320018 https stackoverflow com a 17320018