Firebase 与 Angular 的集成

Question

我正在尝试将 Angular 与 Firebase 集成，但我无法这样做，因此欢迎提出任何建议。

我的文件是， app.module.ts

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


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


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


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

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  courses:any[];

 constructor (db:AngularFireDatabase) {
    db.list('/courses')
    .subscribe (courses => {
      this.courses = courses;
      console.log(this.courses);
    })
 }

}

app.component.html

<ul>
    <li *ngFor="let course of courses"> 
        {{course.$value}}
    </li> 
</ul>

environment.ts 导出常量环境 = { 生产：假， 火力基地：{ apiKey: "AIzaSyDWS........", 等等等等

} };

以下是错误 错误：src/app/app.component.ts:12:3 - 错误 TS2564：属性“课程”没有初始值设定项，并且未在构造函数中明确分配。 课程：任何[]；

错误：src/app/app.component.ts:16:17 - 错误 TS7006：参数“课程”隐含地具有“任何”类型。 .subscribe (课程 => {

错误：src/app/app.component.ts:16:6 - 错误 TS2339：“AngularFireList”类型上不存在属性“subscribe”。 .subscribe (课程 => {

理想情况下在浏览器中应该是这样的，

• 课程 1
• 课程 2
• 课程 3

感谢和问候，

Answer 1

在您的 app.component.ts 中：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 // plz specify the interface for course
 courses$: Observable<any[]> = db.list('/courses').valueChanges()

 constructor (db:AngularFireDatabase) {}

}

在您的 app.component.html 中：

<ul>
    <li *ngFor="let course of courses$ | async;"> 
        {{course?.$value}}
    </li> 
</ul>