如何使用Angular Firestore (Angular 7)返回Firebase文档属性？

Angular Firestore是Angular框架中与Firebase云数据库Firestore集成的模块。它提供了一种简单而强大的方式来处理与Firestore数据库的交互。

要使用Angular Firestore返回Firebase文档属性，可以按照以下步骤进行操作：

首先，确保已经在Angular项目中安装了Firebase和Angular Firestore模块。可以使用npm包管理器来安装它们：

npm install firebase @angular/fire

在Angular项目中，创建一个Firebase配置文件，用于连接到Firebase项目。在src/environments目录下创建一个名为environment.ts的文件，并添加以下内容：

export const environment = {
  production: false,
  firebase: {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    databaseURL: "YOUR_DATABASE_URL",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
    appId: "YOUR_APP_ID"
  }
};

确保将YOUR_API_KEY、YOUR_AUTH_DOMAIN等值替换为您的Firebase项目的实际值。

在Angular应用程序的根模块（通常是app.module.ts）中，导入Angular Firestore模块并配置Firebase连接。在导入的部分添加以下代码：

import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  // ...
})
export class AppModule { }

在需要访问Firebase文档属性的组件中，导入Angular Firestore服务并使用它来获取文档属性。例如，假设您有一个名为"users"的集合，其中包含用户文档。在组件中添加以下代码：

import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-users',
  template: `
    <ul>
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UsersComponent {
  users: any[];

  constructor(private firestore: AngularFirestore) {
    this.firestore.collection('users').valueChanges().subscribe(users => {
      this.users = users;
    });
  }
}

在上面的代码中，我们使用Angular Firestore的collection()方法来获取"users"集合，并使用valueChanges()方法来订阅该集合的更改。一旦获取到用户数据，我们将其赋值给组件的users属性，并在模板中使用*ngFor指令来显示每个用户的名称。

这样，您就可以使用Angular Firestore返回Firebase文档属性了。

腾讯云相关产品和产品介绍链接地址：