从 firestore 返回嵌套集合作为 angularfire2 和 firebase 的对象

2024-06-07

假设您有以下结构:

shopping-carts (collection)
 - shopping-cart 1(doc)
  -- dateCreated (field)
  -- items (collection)
 - shopping-cart 2(doc
  -- dateCreated
  -- items
 .
 .
 .

那么,我们如何将整个购物车(doc)作为我们定义为的 ShoppingCart 对象来获取

export interface ShoppingCart {
  items: ShoppingCartItem[]
  dateCreated: string
}

afs.doc('shopping-cart/id').valueChanges()只返回创建日期

afs.doc('shopping-cart/id').collection('items').valueChanges()返回物品。

将所有内容整合在一起并将其创建为对象的简单方法?


可能不是最好的解决方案,但目前还找不到更好的解决方案。

this.shoppingCartsCollection = afs.collection<Servicio>('shopping-carts', 
        ref => ref.orderBy('dateCreated', 'asc'));

this.shoppingCarts = this.shoppingCartsCollection
    .snapshotChanges()
    .map(values => {
       return values.map(value => {

          const shopping-cart = value.payload.doc.data();
          const itemsArray = shopping-cart.items;
          shopping-cart.observableItems = [];

          for (var i = 0, len = itemsArray.length; i < len; i++) {
             itemDocRef = itemsArray[i];
             value.observableItems.push(afs.doc('items/'+ itemDocRef.id).valueChanges());
          }

          return shopping-cart;
       });
    });

访问您的物品数据,就像任何其他可观察的数据一样

<div *ngFor="let shoppingCart of shoppingCarts | async">
   <p *ngFor="let observableItem of shoppingCart.observableItems">
      {{(observableItem | async)?.displayName}}
   </p> 
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从 firestore 返回嵌套集合作为 angularfire2 和 firebase 的对象 的相关文章

  • 加载 ng2-table 数据表单 API

    我正在学习 Angular 2 我想使用 PHP 中的 API 数据填充 ng2 table 我有一个返回数据的服务 但我不知道如何使用服务的订阅数据填充数据变量 我正在调用服务方法 getLanguages 我的服务代码是 import
  • Angular4 - 如何确保 ngOnDestroy 在离开之前完成

    我有一个对象列表 用户可以单击其中一个 然后加载一个子组件来编辑该组件 我遇到的问题是 当用户返回列表组件时 子组件必须在 ngOnDestroy 方法中进行一些清理 这需要调用服务器来对对象进行最终的 修补 有时此处理可能会有点慢 当然
  • 如何将 Angular 7 应用程序包含在现有的 html 文件和网站中?

    我一方面有一个现有网站 另一方面有一个 Angular 7 应用程序组件 我想编辑现有的someusecase html并重用我的 Angular 7 应用程序 例如
  • 使用自定义令牌进行 Firebase 身份验证

    我有一个 firebase 项目 我试图从我的 Rails 服务器进行身份验证 按照文档上的说明使用 ruby jwt 库创建自定义令牌 但我不断收到相同的错误 auth invalid custom token 自定义令牌格式不正确 请检
  • 在哪里可以找到 firebase-debug.log 以了解模拟器没有完全关闭的原因?

    我在用firebase emulators start启动 firebase 模拟器 当关闭它时 通过Ctrl C 它告诉我它没有正确关闭 我需要咨询firebase debug log无处可寻 我怀疑它应该位于与云函数相关的所有其他内容所
  • Firebase数据库在批准后保存数据

    我在 iOS 应用程序上使用 firebase 数据库 我正在快速写作 我正在使用 发送 按钮在我的 firebaseDatabase 上写入数据 例如文本字段和标签值 有什么方法可以接受或拒绝我的数据库中的数据吗 我的意思是 如果用户向文
  • 我无法在项目中使用节点波本威士忌

    我尝试对 scss 文件使用 npm 模块 波本威士忌 我收到以下错误 with function var paths Array prototype slice call arguments return concat apply bou
  • 如何将 JSON 对象解析为 TypeScript 对象

    我目前正在尝试将收到的 JSON 对象转换为具有相同属性的 TypeScript 类 但无法使其工作 我究竟做错了什么 员工阶层 export class Employee firstname string lastname string
  • 输入属性在 ngx-charts 模板中不起作用

    按照这个answer https stackoverflow com questions 47826641 ngx charts cant load bar charts directly with async pipe in angula
  • 如何让 Angular2 在渲染组件之前等待承诺

    第一 是的 我事先用谷歌搜索过这个 并且solution https stackoverflow com questions 34731869 wait for angular 2 to load resolve model before
  • 角度文件上传

    我是 Angular 的初学者 我想知道如何创建 Angular 5文件上传部分 我试图找到任何教程或文档 但我在任何地方都没有看到任何内容 有什么想法吗 我尝试过ng4 文件 https github com bonjurmrfirst
  • 角 2 材料容器固定不工作

    我对 CSS 和 Angular 2 材质有疑问 任何固定定位元素的行为都不像固定在 md sidenav container 内 如果它不在容器内 则它可以正常工作 这是该问题的链接 只需将 md toolbar 复制并粘贴到容器内部 您
  • Ionic 3:菜单切换总是被隐藏

    我已经在 Ionic 3 中实现了汉堡菜单 但我遇到了一个问题 当我在 Android 设备上运行该应用程序时 汉堡菜单不断消失 即打开侧面菜单的按钮消失了 然而 这种情况只是偶尔发生 我尝试运行该应用程序 同时使用 Google Chro
  • 如何在 RxJS 中“等待”两个可观察值

    在我的应用程序中我有类似的东西 this personService getName id concat this documentService getDocument subscribe response gt console log
  • 聚合物纸下拉菜单在浏览器中未正确呈现

    我对简单的纸张下拉菜单的渲染 html 遇到问题 列表项并不显示为样式化的 菜单 而只是出现在页面上的项目列表 单击渲染的纸张输入组件 渲染的下拉列表的一部分 确实会为波纹设置动画 但不会为菜单和菜单项的显示 隐藏设置动画 单击列表中的某个
  • 使用 Angular 2 中的 TypeScript 关闭引导程序模式

    我有一个按钮 单击该按钮我将打开一个引导模式弹出窗口 模式弹出窗口包含一些带有提交按钮的字段 我只想在保存数据后关闭弹出窗口 我无法使用数据关闭 因为它会在用户点击按钮后立即关闭弹出窗口 有没有办法通过typescript关闭弹出窗口 费用
  • firestore是否支持事务中的集合级锁定?

    我曾在 mongodb 中工作 它不是 sql 数据库 它仅支持文档级锁 由于firestore也不是sql数据库 它支持文档级锁还是允许集合级锁 唯一的锁定操作是文档锁定交易 https firebase google com docs
  • 从 firebase 数据库获取最高分值

    在我的网站上有一些我从 firebase 获得的电影 电影的分数在0到100之间 我已经在我的网站上找到了所有电影 我还想按降序显示它们 例如评分最高的 5 部电影 我怎样才能实现这一点 感谢您的回答 const app initializ
  • 如何通过方法添加标记,openlayers 4,Angular 4

    我想在我的地图中添加实时位置标记 作为第一步 我只想在地图中显示一个静态点 纬度 经度 或标记 由添加标记我的代码中的方法 这是我的代码 import Component OnInit AfterViewInit ViewEncapsula
  • 将 Facebook 图片 URL 上传到 Firebase 存储

    我正在尝试将用户的 Facebook 个人资料图片上传到 Firebase 存储 let dictionary result as NSDictionary let data dictionary objectForKey data let

随机推荐