Ionic3:使用angularFire2错误获取Firebase数据

时间:2018-06-25 17:04:23

标签: firebase firebase-realtime-database ionic3 angularfire2

我想使用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>

但这是我遇到的错误: enter image description here enter image description here

请,我在做什么错了?

0 个答案:

没有答案