使用AngularFire2/Firestore在Ionic/Angular中从模板中查找文档字段的引用
AngularFire2是一个用于在Angular应用程序中与Firebase实时数据库和身份验证进行交互的库。Firestore是Firebase的云端NoSQL文档数据库。在Ionic/Angular应用程序中使用AngularFire2/Firestore，可以通过以下步骤从模板中查找文档字段的引用：
- 首先，确保已经安装了AngularFire2和Firestore依赖。可以使用npm进行安装：npm install firebase @angular/fire --save
- 在Angular应用程序的模块文件中导入必要的模块：import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
@NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule
],
// ...
})
export class AppModule { }这里的
environment.firebaseConfig是Firebase项目的配置信息，需要在环境文件中进行设置。 - 在需要使用Firestore的组件中，导入Firestore服务并注入：import { AngularFirestore } from '@angular/fire/firestore'; @Component({ // ... }) export class MyComponent { constructor(private firestore: AngularFirestore) { } }
- 使用
collection()方法获取集合的引用，并使用doc()方法获取文档的引用：this.firestore.collection('collectionName').doc('documentId');这里的collectionName是集合的名称，documentId是文档的唯一标识符。 - 使用
valueChanges()方法获取文档字段的引用：this.firestore.collection('collectionName').doc('documentId').valueChanges();该方法返回一个可观察对象，可以通过订阅来获取文档字段的实时更新。
总结：
AngularFire2/Firestore是一种在Ionic/Angular应用程序中与Firebase实时数据库和身份验证进行交互的库和云端NoSQL文档数据库。通过使用AngularFire2/Firestore，可以从模板中查找文档字段的引用，首先导入必要的模块，然后在组件中注入Firestore服务，使用collection().doc().valueChanges()方法来获取文档字段的引用。
腾讯云相关产品推荐：
- 云数据库 TencentDB：https://cloud.tencent.com/product/cdb
- 云服务器 CVM：https://cloud.tencent.com/product/cvm
- 云函数 SCF：https://cloud.tencent.com/product/scf
- 云存储 COS：https://cloud.tencent.com/product/cos
- 人工智能平台 AI Lab：https://cloud.tencent.com/product/ailab
- 物联网平台 IoT Explorer：https://cloud.tencent.com/product/iothub
- 区块链服务 TBC：https://cloud.tencent.com/product/tbc
相关·内容
3回答
NullInjectorError: InjectionToken angularfire2.app.options没有提供程序
angular、typescript、firebase、google-cloud-firestore、angular7
我正在尝试在云Firestore数据库中插入表单数据。下面是我的x.component.ts文件，我在其中编写代码的构造函数中遇到错误
private firestore: AngularFireStore
import { Component, OnInit } from '@angular/core';
import { GroupService } from '../shared/group.service';
import { NgForm } from '@angular/forms';
// impo
浏览 2提问于2019-03-19得票数 8
回答已采纳
2回答
如何创建(设置)数据以使用AngularFire进行修复？
angular、firebase、google-cloud-firestore、angularfire2
我在跟踪。我得到了读取工作，它显示的数据从我的Firestore数据库在角度视图。我很困惑如何让Create (set)工作。
我的app.component.html显示了一个带有Submit按钮的小文本表单字段，并显示了Firestore数据库中的值：
<form (ngSubmit)="onSubmit()">
<input type="text" [(ngModel)]="name" name="name">
<button type="submit" value=&#
浏览 46提问于2022-02-25得票数 -1
回答已采纳
1回答
“错误:没有AngularFirestore的提供者！”- Ionic 3
angular、ionic-framework、ionic3、angularfire2
我遵循安装在我的Ionic 3应用程序中安装AngularFire2。
app.module.ts
import { AngularFireModule } from "angularfire2";
import { AngularFirestoreModule } from "angularfire2/firestore";
...
imports = [
....
AngularFireModule.initializeApp(firebaseConfig),
AngularFirestoreModule,
....
]
浏览 3提问于2019-04-06得票数 0
1回答
离子防火墙找不到模块“@角/火/火”
angular、ionic-framework、google-cloud-firestore
我是这样进口安古拉消防局的
import { AngularFirestore } from '@angular/fire/firestore';
它的显示错误:找不到模块“@角/火/防火墙”。
"firebase": "^4.13.1",
"angularfire2": "^5.0.0-rc.4",
"rxjs": "^6.0.0",
"rxjs-compat": "^6.1.0",
app.module.ts
import { AngularFir
浏览 0提问于2019-05-10得票数 1
回答已采纳
1回答
在Angular 11.0.5中使用AngularFire2
angular、typescript、firebase、angularfire2
我正在尝试使用Firebase作为我的angular应用程序的数据库。
根据 (在官方开发者Github页面上)的说法，首先，我在我的项目中安装了npm install angularfire2 firebase --save。
然后我将firebase添加到环境中，如下所示：
export const environment = {
production: false,
firebase: {
apiKey: "AIzaSyAsxljRPGVlI8qhEAWX4SpnGP-ozNH-USQ",
authDomain: "ng-ft-fd861.
浏览 0提问于2020-12-19得票数 0
2回答
为什么create函数不适合我？火力基础/角度/恢复
javascript、angular、firebase、google-cloud-firestore
我试图将用户数据提交到firebase防火墙数据库，但是创建一个新集合的功能对我不起作用，我已经检查了一些不同的方法，但是没有一个主题有效，我已经使用我终端上的firebase组件更新了我的firebase配置文件。
这是调用使用防火墙的服务的代码：
this.authSvc.register(email, password).then((result) => {
this.authSvc.logout();
this.verifyEmail();
this.res = result?.user;
this.registerDB()
浏览 9提问于2022-11-10得票数 0
回答已采纳
1回答
使用angularfire2从Firebase获取数据(文档示例)
javascript、firebase、angular5、google-cloud-firestore、angularfire2
我正在尝试从Firebase获取数据库。我走过了这个。运行ng serve之后，什么都没有发生，控制台中出现了以下错误：
2018-05-21T12:25:48.364Z @firebase/消防站: Firestore (5.0.3)：无法到达Firestore后端。
environment.ts
export const environment = {
production: false,
firebase: {
apiKey: "AIzaSyCip0O3rjU6AXHUKZg7Z26hpLZThTfStsA",
authDomain: &#
浏览 0提问于2018-05-21得票数 0
1回答
Angular 10中的FirebaseObjectObservable和CanActivate问题
angular、angular10
我告诉你我的问题。我在udemy上开始了一门有角度的课程。重点是在课程中他们使用了angular 4，而我使用了angular 10，我后来才意识到这个版本的变化。在整个课程中，我一直在将很多东西从angular 4迁移到angular 10，但它给我带来了一个拦截器。
我们正在做一个练习，我们正在做一个shoppingCart网站，其中我是一个管理员用户，因此，这只能有普通用户不能访问。我制作了它的组件和服务，但显然讲师使用的程序版本与当前版本的angular不同。
我留下了显示问题的代码(带有一个注释，指出了问题发生的位置)：
User.service.ts =>这是给我一个错误的组
浏览 0提问于2020-09-07得票数 0
1回答
错误TS2339:类型'{}‘上不存在属性'contenido’
typescript、firebase、google-cloud-firestore、angular6
我正在用angular 6和firebase做crud，在它的firestore数据库中，我正在通过一个表单编辑一些数据，应用程序应该可以工作，但编译器给了我这个错误：
ERROR in src/app/Components/Posts/dashboard-posts/dashboard-posts.component.ts(113,37): error TS2339: Property 'titulo' does not exist on type '{}'.
src/app/Components/Posts/dashboard-posts/dashboard
浏览 26提问于2018-08-15得票数 2
回答已采纳
2回答
检查用户中的displayName是否是唯一的Firebase &角
javascript、angular、firebase、google-cloud-firestore
在将新用户添加到firebase之前，我希望检查其他用户是否已经存在displayName。我将displayName存储在users中
root / users / document *(uid as id)* / fields *like uid, displayName, email, ...*
我试过这样做：
import { Injectable, NgZone } from '@angular/core';
import { auth } from 'firebase/app';
import { User } from "./user
浏览 5提问于2020-07-27得票数 0
回答已采纳
1回答
类型'MonoTypeOperatorFunction<T>‘的参数不能分配给'OperatorFunction<T \\未定义的，T>’类型的参数
angular、firebase、generics
我正在尝试制作通用Firestore服务。这是我的剧本
doc$(id: string): Observable<T> {
return this.firestore.doc<T>(`${this.basePath}/${id}`).valueChanges().pipe(
tap(r => {
if (!environment.production) {
console.groupCollapsed(`Firestore Streaming [${this.basePath}] [doc$] ${id}`);
console.
浏览 8提问于2020-12-14得票数 1
回答已采纳
2回答
当尝试保存到数据库时，Angularfire firestore一直没有提供足够的权限
angular、firebase、google-cloud-firestore、angularfire
当我尝试上传到云firestore时，我一直收到"FirebaseError:缺少或权限不足“的提示
这些是我的规则
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read: if request.auth.uid == request.auth.uid
allow write: if request.auth.uid == request.auth.
浏览 3提问于2021-05-29得票数 3
1回答
AngularFire2:您正在使用firebase的开发构建。
google-cloud-firestore、angular6、angularfire2、angularfire5
因此，我使用正式文档来安装和安装angularfire2。
这很好，我的数据正在输入，但是在为生产构建时，我得到了以下错误：
看起来您正在使用Firebase的开发构建。在将Firebase应用程序部署到生产中时，建议只导入您打算使用的各个SDK组件。
对于CDN构建，可以使用以下方式(用组件的名称替换-例如，auth、数据库等)：
我试过了所有的建议，但都没有效果。
有什么想法吗？thx，
根模块
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/r
浏览 1提问于2018-11-01得票数 0
4回答
Angularfire 2找不到模块“Firebase/app”
angular、firebase、angularfire2
附件： import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { RoomComponent } from './component/room/room.component';
import { AngularFireAuth } from '@angular/fire/auth';
import { FirebaseService } f
浏览 49提问于2018-09-27得票数 4
回答已采纳
1回答
从firebase数据库获取数据时出错
angular、firebase
我正在尝试从firebase数据库中获取数据，但在我的控制台中得到了以下错误
修复(5.8.3)：无法到达云修复后端。连接失败1次。最近的错误: FirebaseError: code=failed-前提条件是: Cloud项目无法使用Cloud。
服务档案
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
@Injectable({
providedIn: 'root'
浏览 0提问于2019-02-16得票数 4
5回答
@firebase/ Firestore : Firestore (5.0.4)：无法到达后端。后端在10秒内没有响应
angular、firebase、google-cloud-firestore
我正在做一个6角的项目。这是我使用--prod标志构建主机并运行时所遇到的错误。我已经坐了很久了。一开始我认为这可能是消防队的问题，于是我就等着。但是现在更新为5.0.4，这个问题仍然存在。
2018-06-04T06:11:47.859Z @firebase/防火墙: Firestore (5.0.4)：无法到达云修复后端。后端在10秒内没有响应。
这通常表示您的设备目前没有健康的Internet连接。客户端将在脱机模式下运行，直到能够成功地连接到后端为止。
app.module.ts
Imports: [
AngularFireModule.initializeApp(en
浏览 3提问于2018-06-04得票数 19
1回答
AngularFire2入门-无法到达后台的防火墙
angular、firebase、angularfire2
我曾在试着遵循指南，但我不断地得到“无法到达的防火墙支持”。
当我尝试用vanillaJS做一个类似的教程时，我没有问题，所以我很确定我的环境设置是正确的。
我的消防数据库规则
{
"rules": {
".read": true,
".write": true
}
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'
浏览 2提问于2018-05-11得票数 0
回答已采纳
1回答
属性'onSnapshot‘在'AngularFirestoreCollection<unknown>’类型上不存在
javascript、firebase、google-cloud-firestore、angularfire2
我试图将侦听器从云Firebase中分离出来，但我仍然会遇到这个错误。
属性'onSnapshot‘在'AngularFirestoreCollection’类型上不存在
你知道吗，我应该进口什么？我直接从Firebase文档中复制此代码。
let unsub = this.firestore.collection('cities').onSnapshot(() => {
});
// Stop listening for changes
unsub();
这是我的构造函数和导入：
import { AngularFirestore } from &#
浏览 0提问于2019-12-16得票数 2
1回答
修复文档与Python合并
python、firebase、google-cloud-firestore
我需要使用set()和{merge: true}将文档推送到Firebase Firestore数据库。我不能使用update()，因为我不能保证预先存在这个文档。
如果我使用的是角& TypeScript，代码将是：
import { AngularFirestore } from '@angular/fire/firestore';
constructor(private firestore: AngularFirestore) {
}
insertData() {
this.firestore.collection('officePlants&
浏览 2提问于2021-05-13得票数 0
回答已采纳
1回答
ERROR TypeError:将圆形结构转换为JSON -->从构造函数'FirebaseAppImpl‘Firebase角的对象开始
javascript、angular、firebase、google-cloud-firestore、angularfire2
当试图从一个可观察到的地方获取数据时，我从控制台得到了这个错误。
我的代码如下所示
英语服务- service.ts
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
@Injectable({
providedIn: 'root'
})
export class ViewReportSe
浏览 2提问于2020-11-15得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
