Question

我正在尝试从 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

Answer 1

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

将AngularFirestore更改为AngularFireDatabase。

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

-OR -

将您的数据移至Cloud Firestore

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

1 个答案: