使用Angular检索Json格式的Firebase实时数据库

npm install firebase @angular/fire

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

const firebaseConfig = {
  // Firebase项目的配置信息
};

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

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

@Injectable({
  providedIn: 'root'
})
export class FirebaseService {
  constructor(private firestore: AngularFirestore) { }

  // 检索数据
  retrieveData() {
    return this.firestore.collection('collectionName').valueChanges();
  }
}

import { Component } from '@angular/core';
import { FirebaseService } from './firebase.service';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of data">{{ item | json }}</li>
    </ul>
  `
})
export class AppComponent {
  data: any[];

  constructor(private firebaseService: FirebaseService) { }

  ngOnInit() {
    this.firebaseService.retrieveData().subscribe(data => {
      this.data = data;
    });
  }
}