使用 angularfire2 从 Firebase 获取数据（文档示例）答案

【问题标题】：Get data from Firebase using angularfire2 (The doc example)使用 angularfire2 从 Firebase 获取数据（文档示例）
【发布时间】：2018-05-21 13:11:45
【问题描述】：

我正在尝试从 Firebase 获取 数据库。我已经浏览过这个tutorial。在我运行ng serve 之后，什么也没发生，我在控制台中出现了这个错误：

[2018-05-21T12:25:48.364Z] @firebase/firestore：Firestore (5.0.3)：无法访问 Firestore 后端。

environment.ts：

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyCip0O3rjU6AXHUKZg7Z26hpLZThTfStsA",
    authDomain: "clientpanel-c4a89.firebaseapp.com",
    databaseURL: "https://clientpanel-c4a89.firebaseio.com",
    projectId: "clientpanel-c4a89",
    storageBucket: "clientpanel-c4a89.appspot.com",
    messagingSenderId: "894070096713"
  }
};

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// FIREBASE / ANGULARFIER2
import { environment } from '../environments/environment';
import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { AngularFireStorageModule } from 'angularfire2/storage';
import { AngularFireAuthModule } from 'angularfire2/auth';

// COMPONENTS
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts：

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('/client').valueChanges();
  }
}

app.component.html：

<h2>The list</h2>

<ul>
  <li class="text" *ngFor="let item of items | async">
    {{item.email}}
  </li>
</ul>

最后，这是My Firebase

【问题讨论】：

您应该从这篇文章中删除所有 environment.ts 内容。该信息不打算公开。
您是否更改了在 firebase 中的读写权限？
@R.Richards 对于 Firebase，这些特定的密钥实际上完全可以共享（尽管这里的 MCVE 不需要它们）。见stackoverflow.com/questions/37482366/…
@FrankvanPuffelen 很高兴知道！谢谢你。
@R.Richards 这个项目只是为了测试。

标签： javascript firebase angular5 google-cloud-firestore angularfire2

【解决方案1】：

您的屏幕截图显示您使用的是 firebase 实时数据库，但您的代码使用的是 firebase Cloud Firestore。

将AngularFirestore 更改为AngularFireDatabase。

使用您的数据库的工作示例：https://stackblitz.com/edit/so002

-或-

将您的数据移动到 Cloud Firestore

【讨论】：