使用Angular从firebase实时数据库读取数据并显示为列表

npm install firebase

export const firebaseConfig = {
  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"
};

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { firebaseConfig } from './firebaseConfig';

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

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-data-list',
  template: `
    <ul>
      <li *ngFor="let item of items | async">{{ item.name }}</li>
    </ul>
  `
})
export class DataListComponent {
  items: Observable<any[]>;

  constructor(private db: AngularFireDatabase) {
    this.items = db.list('items').valueChanges();
  }
}