首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用angular从firebase中检索嵌套在两个集合中的数据

Angular是一种流行的前端开发框架,Firebase是一种云数据库服务。在Angular中使用Firebase检索嵌套在两个集合中的数据可以通过以下步骤完成:

  1. 首先,确保已经安装了Angular CLI并创建了一个新的Angular项目。
  2. 在Firebase控制台上创建一个新的项目,并获取到项目的配置信息,包括项目ID、API密钥等。
  3. 在Angular项目中安装Firebase SDK,可以使用以下命令:npm install firebase
  4. 在Angular项目的根目录下创建一个新的Firebase配置文件,命名为firebase.config.ts,并将Firebase项目的配置信息填入其中,例如:export const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID" };
  5. 在Angular项目的根模块中导入Firebase模块和配置文件,并初始化Firebase应用,例如:import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AngularFireModule } from '@angular/fire'; import { firebaseConfig } from './firebase.config';

@NgModule({

代码语言:txt
复制
 imports: [
代码语言:txt
复制
   BrowserModule,
代码语言:txt
复制
   AngularFireModule.initializeApp(firebaseConfig)
代码语言:txt
复制
 ],
代码语言:txt
复制
 declarations: [AppComponent],
代码语言:txt
复制
 bootstrap: [AppComponent]

})

export class AppModule { }

代码语言:txt
复制
  1. 在需要检索数据的组件中导入Firebase模块,并注入AngularFirestore服务,例如:import { Component } from '@angular/core'; import { AngularFirestore } from '@angular/fire/firestore';

@Component({

代码语言:txt
复制
 selector: 'app-my-component',
代码语言:txt
复制
 template: `
代码语言:txt
复制
   <ul>
代码语言:txt
复制
     <li *ngFor="let item of items">{{ item.name }}</li>
代码语言:txt
复制
   </ul>
代码语言:txt
复制
 `

})

export class MyComponent {

代码语言:txt
复制
 items: any[];
代码语言:txt
复制
 constructor(private firestore: AngularFirestore) {
代码语言:txt
复制
   this.getItems();
代码语言:txt
复制
 }
代码语言:txt
复制
 getItems() {
代码语言:txt
复制
   this.firestore.collection('collection1').doc('document1').collection('collection2').valueChanges().subscribe(items => {
代码语言:txt
复制
     this.items = items;
代码语言:txt
复制
   });
代码语言:txt
复制
 }

}

代码语言:txt
复制

上述代码中,collection1collection2分别表示两个集合的名称,document1表示嵌套在两个集合中的文档ID。通过valueChanges()方法可以实时获取数据,并将数据赋值给items数组。

这样,通过以上步骤,就可以在Angular中使用Firebase检索嵌套在两个集合中的数据了。

推荐的腾讯云相关产品:腾讯云云开发(Tencent Cloud CloudBase),它是一款集成了云函数、云数据库、云存储等功能的云原生后端一体化服务。您可以通过腾讯云云开发来实现类似Firebase的功能,具体产品介绍和文档可以参考腾讯云云开发官方网站:腾讯云云开发

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用FirebaseExploiter扫描和发现Firebase数据安全漏洞

广大研究人员可以轻松识别出Firebase数据存在可利用安全问题。...功能介绍 1、支持对列表目标主机执行大规模漏洞扫描; 2、支持在exploit.json文件自定义JSON数据并在漏洞利用过程中上传; 3、支持漏洞利用过程自定义URI路径;...工具使用 下列命令将在命令行工具显示工具帮助信息,以及工具支持所有参数选项: 工具运行 扫描一个指定域名并检测不安全Firebase数据库: 利用Firebase数据库漏洞...,并写入自己JSON文档: 以正确JSON格式创建自己exploit.json文件,并利用目标Firebase数据安全漏洞。...检查漏洞利用URL并验证漏洞: 针对目标Firebase数据库添加自定义路径: 针对文件列表目标主机扫描不安全Firebase数据库: 利用列表主机Firebase数据库漏洞: 许可证协议

37010

骑上我心爱小摩托,再挂上AI摄像头,去认识一下全城垃圾!

垃圾GPS坐标通过简单gpsd接口usb模块读取,将数据存储在Google Firestore实时数据,这样本地Google firebase SDK就被用于客户端应用程序开发。...应用程序 现代数据分析应用程序必须支持任何设备和平台访问,而实时数据访问则需要使用适当后端技术和能够支持用户查询数据模型。...我们选择Ionic+Angular进行前端开发和谷歌Firestore坐标实时数据库。...Ionic+Angular让我们可以从一个普通代码库生产iOS和安卓应用程序,以及一个基于web可以任何浏览器访问应用程序。...Google Firebase则可以让我们将每个GPS点左边作为一个嵌套集合/文档存储。

10.3K30
  • 一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    我们如何用我们输入填充它?如果您以前曾使用过AngularJS,那么您可能会知道双向数据绑定概念。...this.text = text; } } 因此,我们正在使用类来构建数据,除了我们文本外,我们还key$Firebase添加。...我们可以使用诸如ngrx-store-localstorage之类东西来存储我们数据到浏览器localStore,但是如何使用API​​呢?...所以,现在我们已经介绍了我们三个动作两个,让我们继续前进LoadSuccess。目前我们所知道,我们正在从服务器上下载一张卡片列表,我们需要将它们合并到我们服务器State。...这就是你如何将效果集成到服务器加载数据过程。但是我们仍然需要将其发回到我们的卡片创建中。让我们来做这件事吧。

    42.6K10

    如何用深度学习来做检索:度量学习关于排序损失函数综述

    本文比较了各种著名排名损失公式和应用。 深度学习检索正式说法为度量学习(ML)。在这个学习范式,神经网络学习一个 入—— 比如一个128维向量。...这种三元组样本在无监督学习很难获得。因此,尽管对比损失在检索方面的表现不佳,但在无监督学习和自我监督学习文献仍普遍使用。 三元组损失 最常见排序损失是三元组损失。它解决了对比损失一个重要限制。...这些变体采用相同三元组损失函数,但是具有不同三元组抽样策略。在原始三元组损失训练数据集中随机抽取三元组样本。随机抽样收敛速度很慢。...Angular Loss Angular loss解决了三元组损失两个限制。首先,三元组损失假设在不同类别之间有固定margin m。...当使用一个新检索任务和调整一个新训练数据超参数(学习率和batch_size)时,我发现semi-hard三元组损失是最稳定。它没有达到最好性能,但它是最不可能退化

    1.4K20

    2018年Web开发人员应该学习12个框架

    在本文中,我分享了12个与Java开发,移动应用程序开发,Web开发和大数据相关有用框架。 1)Angular 2+ 这是另一个JavaScript框架,它在我2018年要学习东西列表。...Web开发世界分为Angular和React,由您自己选择。大多数时候,它取决于环境; 例如,如果你正在使用基于React项目,那么显然,你需要学习React。...由于Spring Security已成为Java世界Web安全性代名词,因此在2018年使用最新版本Spring Security更新自己是完全合理。...11)Firebase Firebase是Google移动平台,可帮助你快速开发高质量移动应用并发展业务。你可以选择Firebase作为Android或iOS应用程序后端。...如果你希望在2018年进入利润丰厚移动应用程序开发业务,那么学习Firebase是一个非常好主意,高级iOS和Firebase:Rideshare是一个很好起点。

    5.5K40

    支持全栈编程语言、随取随用、一键部署,谷歌推出浏览器AI开发环境IDX

    多年来,谷歌在多平台应用程序开发方面一直有所关注,并推出了 Angular 、Flutter 、Google Cloud 和 Firebase 。...IDX 每个工作区都具有基于 Linux 虚拟机全部功能,同时还可以在使用者邻近数据中心通过云托管方式进行访问。...使用者还可以 GitHub 导入现有项目,这样就可以从上次中断地方继续开始进行工作了。并且 IDX 支持大多数技术栈。...使用 Firebase Hosting 实现 Web 发布 将应用程序部署到生产环境是一个常见痛点。...IDX 通过集成 Firebase Hosting 使这一问题变得更加简单,只需点击几下,就能部署 Web 应用可共享预览版,或通过快速、安全全球托管平台部署到生产环境

    19140

    谷歌重磅发布多平台应用开发神器:背靠 AI 编程神器 Codey,支持 React、Vue 等框架,还能补全、解释代码

    Duet 等)如何帮助开发者加快代码编写速度、提高代码编写质量。...虽然谷歌多年来一直致力降低多平台应用开发难度,也先后推出了 Angular、Flutter、Google Cloud 乃至 Firebase 等成果,但似乎还能做得更好。...开发者也可以使用各类流行框架预制模板创建新项目,包括 Angular、Flutter、Next.js、React、Svelte、Vue 以及 JavaScript 和 Dart,并即将推出对 Python...IDX 项目集成了 Firebase Hosting 以降低整个操作难度,只需单击几下,即可部署 Web 应用可共享预览,或者使用快速、安全全球托管平台将其部署至生产环境。...更重要是,Codey 仍在不断学习和发展,谷歌服务生态系统各个项目中持续汲取新力量。

    58130

    FireBase 亲密接触

    正常 App 都是属于网络应用,数据都是服务器上获取。这就需要有专业后台开发人员开发后台业务服务器,然后为我们 App 提供数据。...数据存储为 JSON,以毫秒速度跨连接设备同步,当您应用处于离线状态时可以使用数据。 Storage:直接 Firebase 客户端 SDK 存储和检索用户生成内容,如图片、音频和视频。...安排和发送消息,以便在最适当时间吸引合适用户。 App Indexing:通过在 Google 搜索结果显示相关应用内内容,帮助用户发现和再次使用应用。...AdWords:将 AdWords 自动链接至您在 Firebase Analytics 定义用户区段。改进广告目标并优化您广告系列效果。...包名可以在 Modile 目录下 build.gradle 中找到 ? 我们可以使用 gradle 来获取获取签名,双击有变选项卡 signingReport 生成签名。 ?

    15.9K00

    泄露2.2亿条数据,谷歌Firebase平台数据库被100%读取

    曝光记录总数达 2.23 亿条 扫描互联网、解析原始数据和整理工作耗时约一个月,整个过程开始到结束并不顺利。...起初,他们使用 MrBruh 制作 Python 脚本进行扫描,以检查网站或其 JavaScript 捆绑程序 Firebase 配置变量。...为了自动检查 Firebase 读取权限,研究小组使用了 Eva 另一个脚本,该脚本会抓取网站或其 JavaScript,以便访问 Firebase 集合(Cloud Firestore NoSQL...一切是如何开始 在互联网上扫描配置错误 Firebase 实例所暴露 PII 是研究人员两个月前开展另一个项目的后续行动,当时由于配置错误问题,他们获得了人工智能招聘软件解决方案 Chattr...所使用 Firebase 实例管理员和 "超级管理员 "权限。

    18710

    18 个漂亮 Bootstrap 模板

    在整个开发过程收集非常庞大且独特应用、插件、组件数据库。 市场上功能最强大模板之一。 ThemeForest 上最受欢迎模板。 最近更新:大约一周前。...img 优秀管理模板。 使用 Bootstrap、Sass 和 HTML5 创建。 包含用于构建管理面板、项目管理系统、CRM 或 CMS 元素集合。 包含设计师草图文件。...具有材料设计高级管理模板。 使用技术是Angular 8、Sass、HTML5、Firebase。 精心设计时尚元素。 80 多种集成页面和 12 种集成语言。...在纯 JS 和 ReactJS 可用。 没有 jQuery 依赖性。 两个仪表板:分析和电子商务。 带有商店、愿望清单、结帐“电子商务”部分。 快速搜索。 数百个页面、组件和卡片。...仔细阅读使用所需技术构建模板演示,同时牢记第 2 点中学到内容。 选择模板。

    14.5K11

    我们弃用 Firebase

    Firestore 文档 / 集合架构:它迫使人们仔细考虑数据建模。它还反映了一个直观导航方案。 Firestore 关系数据也是如此。...Firebase 套件可以帮助我们快速构建可扩展原型,处理来自客户端数据连接,在发布到生产环境之前强化安全规则,并对敏感逻辑使用 Firebase Functions。...(见下面我们使用一种丑陋变通方案)附注:说到 Firebase CLI 限制,下面是两个我们经常使用解决方案,或许对你有用。...直接 Google Cloud Console 下载。 GCP 似乎正在蚕食 Firebase 开发环境。 运营角度来看,这是合理。...Zero 脏数据,亚马逊云科技推出云原生数据战略 Serverless时代已经全面到来:冷启动时间降低90%,数据分析All on Serverless 如何破解Web3「存力」难题?

    32.6K30

    便捷自动访问Google 开发者资源网站

    其源代码实现可以看出,它目前支持developers.google.com,firebase.google.com,developer.android.com,angular.io这几个域名自动替换..." : "//firebase.google.cn", "//developer.android.com" : "//developer.android.google.cn", "//angular.io..." : "//angular.cn", } 不过还有一些这些域名下没有CN镜像站点,所以作者又做了一个白名单机制,在白名单内URL不会被替换,即使他们是属于这几个域名下。...其实现来看,非常简单,可能稍微涉及一些 Google Chrome 插件开发知识,不过也不太难。...根本上来看,这是一个非常不错,利用工具提高效率,减少重复劳动例子,我们在工作,生活,也可以多使用这种方式,多借助工具,减少我们重复劳动,提高我们工具效率,把我们时间和精力多放在创造性工作上

    2.1K30

    2018 年 Java,Web 和移动开发需要学习 12 个框架

    在今天文章,我将分享一些你可以学习最好框架,以提升你在移动和Web开发以及大数据技术方面的知识。 在当今世界,对各种框架了解是非常重要。它们使你可以快速开发原型和实际项目。...在本文中,我分享了12个与Java开发、移动app开发、Web开发和大数据相关有用框架。如果你认为还有值得Java和Web开发人员在2018年学习好框架,那么请随时分享到评论。...1)Angular 这是另一个JavaScript框架,也在我2018年学习清单。它提供了一个完全客户端解决方案。你可以使用AngularJS在客户端创建动态网页。...它使用指令(Directives)扩展HTML属性,并使用表达式将数据绑定到HTML。 因为Google支持Angular,所以在性能和定期更新方面你可以放心。...web开发世界被分成了Angular和React两个阵营,具体在哪个阵营取决于你选择方面。大多数情况下,这是由情况决定

    3.3K60

    WPF备忘录(3)如何 Datagrid 获得单元格内容与 使用值转换器进行绑定数据转换IValueConverter

    一、如何 Datagrid 获得单元格内容    DataGrid 属于一种 ItemsControl, 因此,它有 Items 属性并且用ItemContainer 封装它 items. ...在DataGridItems集合,DataGridRow 是一个Item,但是,它里面的单元格却是被封装在 DataGridCellsPresenter 容器;因此,我们不能使用 像DataGridView.Rows.Cells...child == null) child = GetVisualChild(v); else break; } return child; }  二、WPF 使用值转换器进行绑定数据转换...IValueConverter  有的时候,我们想让绑定数据以其他格式显示出来,或者转换成其他类型,我们可以 使用值转换器来实现.比如我数据中保存了一个文件路径”c:\abc\abc.exe”.../Window.Resources> 现在我们去绑定数据地方使用StaticResource来指向转换器 <Binding

    5.5K70

    2020 年你应该知道 React 库

    当我 Angular 切换到 React,我绝对经历了它作为 React 优势。 只有通过 React,您才能使用函数组件和 props 构建组件驱动用户界面。...如果你根本不想关心后端,以下三种解决方案可能适合你: Firebase Auth0 AWS Cognito 如果您正在寻找身份验证 + 数据一体化解决方案,请坚持使用 Firebase 或 AWS。...如果你希望有人来处理所有的事情,如果你已经在使用第三方身份验证/数据库,Netlify 是一个很受欢迎解决方案,比如 Firebase,你可以检查他们是否也提供主机服务(比如 Firebase Hosting...最终,您会发现自己在使用 Enzyme 或 React Testing Library (这两个都在 Jest 测试环境中使用)来进行更详细测试功能集。...REACT VR/AR 实话说,我们很有可能用 React 深入虚拟现实或者增强现实,我没有使用过这些库任何一个,但是它们是我在谈到 React AR/VR 时大脑闪过就是: React 360

    14.4K40

    “别更新了,学不动了” 之:全栈开发者 2019 应该学些什么?

    对于一个真正全栈开发者,你可以在 2019 年选择这三个框架任何一个。 来自React 16 更新 你需要了解 React 基础知识及其基于单向数据流架构组件。...简单地说就是你可以构建可以被添加到不使用 Angular HTML 页面组件,有点像 Web 组件。...现在,我可以使用 Angular 创建世界上最好组件,并将它交给我朋友,她将它用在她 React 应用程序!...Heroku——用于简单和集成服务器和部署。 Now——用于超级简单部署。 Firebase——用于托管基础设施和数据库。...AWS——几乎任何你想要东西,你可以永远不需要考虑自己管理服务器。 你需要学习 SQL ? Firebase、AWS 等托管数据库将继续增长,但你还是需要学习 SQL。

    2.6K30
    领券