我想使用AngularFire2从Ionic3应用程序中的实时Firebase数据库中获取数据,但是我总是遇到一些错误。
这就是我所拥有的:
我的依赖项:
"angularfire2": "^5.0.0-rc.10",
"firebase": "^5.0.4",
我的FirebaseProvider
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import 'rxjs/add/operator/map';
@Injectable()
export class FirebaseProvider {
private eventsRef = this._af.list('events');
constructor(private _af: AngularFireDatabase) {
console.log('Hello FirebaseProvider Provider');
}
public listEvents(){
return this.eventsRef;
}
}
我要在其中使用列表的页面:
import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FirebaseProvider } from './../../providers/providers';
import { AngularFireList } from 'angularfire2/database';
import {Observable} from 'rxjs/Observable';
@IonicPage()
@Component({
selector: 'page-list-events-one',
templateUrl: 'list-events-one.html',
})
export class ListEventsOnePage {
public events: Observable<any>;
eventsList$: Observable<any>;
constructor(public navCtrl: NavController, public navParams: NavParams, public db: FirebaseProvider) {
this.eventsList$ = this.db.listEvents() // DB List
.snapshotChanges() // Key Value Pairs
.map(
changes => {
return changes.map(c => ({
key: c.payload.key, ...c.payload.val()
}))
}
)
}
ionViewDidLoad() {
console.log('ionViewDidLoad ListEventsOnePage');
}
detail() {
this.navCtrl.push('EventOneDetailPage');
}
}
我的HTML文件
<ion-list>
<ion-item *ngFor="let item of eventsList$ | async">
{{item.title}}
</ion-item>
</ion-list>
请,我在做什么错了?