我的 angularfire 应用程序上没有显示任何数据



当我尝试使用以下方法显示数据时:

<li *ngFor="let course$ of courses$ | async">
<pre>{{ course$.title }}</pre>
</li>

对于 angularfire2,我没有数据显示。当我控制台.log(课程$(时,我看到以下对象: Observable {_isScalar: false, source: Observable, operator: MapOperator}

我遵循了本指南:https://www.npmjs.com/package/@angular/fire

app.component.ts:

import { Component } from '@angular/core';
import { Subscription, Observable } from 'rxjs';
import { AngularFireDatabase, AngularFireList, AngularFireObject  } from     'angularfire2/database';
import { AngularFirestore } from '@angular/fire/firestore';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
courses$: Observable<any[]>;
constructor(db: AngularFirestore) {
this.courses$ = db.collection('/courses').valueChanges();
console.log(this.courses$);
}
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule, AngularFireDatabase } from 'angularfire2/database';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from 'src/environments/environment';
import { AngularFirestore } from '@angular/fire/firestore';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule
],
providers: [AngularFireDatabase, AngularFirestore],
bootstrap: [AppComponent]
})
export class AppModule { }

app.comonent.html:

<ul>
<li *ngFor="let course$ of courses$ | async">
<pre>{{ course$.title }}</pre>
</li>
</ul>

我能够解决我的问题。这就是我所做的。我突然想到我遵循的这些教程可能已经过时了,所以我参考了他们的 Github 页面上的官方文档:https://github.com/angular/angularfire/blob/2ebc022d6b680b33d4535f903194a94289bd0107/docs/rtdb/lists.md

它实际上是this.items = db.list('items').valueChanges();不是 '' this.courses$ = db.collection('/courses'(.valueChanges((;'''

而且db: AngularFireDatabaseAngularFirestore

最新更新