如何使用angular 6配置Firebase？

Question

我是angular 6的初学者。我正在尝试使用firebase配置angular 6，但是在设置数据时，我的状态低于错误。

FirebaseError {代码：“ app / no-app”，消息：“ Firebase：没有Firebase应用程序'[DEFAULT]'已创建...-调用Firebase App.initializeApp（）（app / no-app）。”，名称：“ [DEFAULT]”，ngDebugContext：DebugContext_，ngErrorLogger：ƒ，…}代码：“ app / no-app”消息：“ Firebase：未创建Firebase应用程序'[DEFAULT]'-调用Firebase App.initializeApp（）（app /不应用）。” 名称：“ [[DEFAULT]”” ngDebugContext：DebugContext_ {view：{…}，nodeIndex：76，nodeDef：{…}，elDef：{…}，elView：{…}} ngErrorLogger：ƒ（）堆栈：“ [DEFAULT] ：Firebase：未创建Firebase应用程序'[DEFAULT]'-调用Firebase App.initializeApp（）（app / no-app）.↵错误（ http：// localhost：4200 / vendor.js：73214：21 ） app在应用程序上（ http：// localhost：4200 / vendor.js：73097：13 ）↵在RegiComponent上的Object.serviceNamespace [作为Firestore ]（ http：// localhost：4200 / vendor.js：73155：47 ）↵在Object.eval上推送../src/app/regi/regi.component.ts.RegiComponent.saveData（http：// localhost：4200 / main.js：315：68 ）↵[作为handleEvent]（ng：// /AppModule/RegiComponent.ngfactory.js:214:27)↵在handleEvent（ http：// localhost：4200 / vendor.js：55060：41 ）↵在callWithDebugContext（ http：// localhost：4200 / vendor.js：56154 ：25 ）↵在Object.debugHandleEvent [作为handleEvent]（ http：// localhost：4200 / vendor.js：55857：12 ）↵在dispatchEvent（ http：// localhost：4200 / vendor.js：52509：25 ）↵在http：// localhost：4200 / ve ndor.js：52956：38 “ proto ：错误。 请看看我的app.module.ts

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { environment } from '../environments/environment'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { RegiComponent } from './regi/regi.component'; import { LoginComponent } from './login/login.component'; @NgModule({ declarations: [ AppComponent, RegiComponent, LoginComponent ], imports: [ BrowserModule, FormsModule, AngularFireModule.initializeApp(environment.firebaseConfig), AngularFirestoreModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

这是我的环境

 export const environment = { production: false, firebaseConfig: { apiKey: "AIzaSyBNTXxgG5hkzY3_E6E3VRwlMQ798wqBjXA", authDomain: "firsapp-f3cf4.firebaseapp.com", databaseURL: "https://firsapp-f3cf4.firebaseio.com", projectId: "firsapp-f3cf4", storageBucket: "firsapp-f3cf4.appspot.com", messagingSenderId: "736958488941" } //firebase.initializeApp(firebaseConfig); }; 

以下是我在点击时要调用的函数

 saveData($event){ let name : string; let email : string; let passWord : string; let city : string[]; //var database = firebase.database(); // Add a new document in collection "cities" let db = firebase.firestore(); // Add a new document in collection "cities" db.collection("cities").doc("LA").set({ city : ['A','B', 'C', 'D'], }) .then(function() { console.log("Document successfully written!"); }) .catch(function(error) { console.error("Error writing document: ", error); }); 

如果您需要任何进一步的信息，请帮助我，请了解我。

Answer 1

使用angularfire2服务AngularFirestore尝试以下操作，而不是直接尝试访问“ firebase ”。 您可以使用valueChanges（）或snapshotChanges（）从集合中流式传输数据，并根据需要利用RxJS运算符对数据进行其他处理。

import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  // Should ideally use strong types instead of 'any' for better IDE support
  private itemsCollection: AngularFirestoreCollection<any>;
  items: Observable<any[]>;

  constructor(private afs: AngularFirestore) {
    this.itemsCollection = afs.collection<any>('cities');
    this.items = this.itemsCollection.valueChanges();
  }

  ngOnInit() {
    // use RxJS operators to use the data as needed
    this.items.subscribe(cities => console.log(cities));
  }

  saveData() {
    this.itemsCollection.doc('LA').set({ city:  ['A','B', 'C', 'D']} );
  }
}

我强烈建议您先阅读所有angularfire2 Cloud Firestore 文档，然后再继续。

希望有帮助！