Question

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

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

使用angularfire2我没有数据显示。当我console.log（courses $）时，我看到以下对象：可观察的{_isScalar：假，来源：可观察的，运营商：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>

Answer 1

我能够解决我的问题。这就是我所做的。在我看来，我所遵循的这些教程可能已经过时，因此我在其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: AngularFireDatabase而不是AngularFirestore

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

1 个答案: