时间戳

首页 > 解决方案 > 我的 angularfire 应用程序上没有显示数据

angular - 我的 angularfire 应用程序上没有显示数据

问题描述

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

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

使用 angularfire2 我没有数据显示。当我 console.log(courses$) 我看到以下对象： 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>

标签： angularfirebaseangularfire2

解决方案

我能够解决我的问题。这就是我所做的。我突然想到我关注的这些教程可能已经过时了，所以我参考了他们 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

推荐阅读