如何从离子3 2018的firebase读取数据

时间:2018-05-22 07:25:11

标签: firebase firebase-realtime-database ionic3 angularfire2

任何人都可以帮助我从firebase检索数据,我不知道我做错了什么

  

这是我的ts文件

我无法获取数据事件我正在使用订阅,我得到相同的错误

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
    menu_items: Observable<any[]>;
  constructor(public navCtrl: NavController,afDB: AngularFireDatabase) {
    this.menu_items = afDB.list('/menu/').valueChanges(); 
  }
}
  

这是我的HTML文件

我像youtube上的许多教程一样使用async

<ion-item *ngFor="let menu of menu_items | async">
                {{ menu.menu_price }}
        </ion-item>
  

我的app.module

已导入重要部分

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebase_credential),
    AngularFireDatabaseModule
  ],
  

我的依赖

"@angular/animations": "5.2.9",
    "@angular/common": "5.2.9",
    "@angular/compiler": "5.2.9",
    "@angular/compiler-cli": "5.2.9",
    "@angular/core": "5.2.9",
    "@angular/forms": "5.2.9",
    "@angular/http": "5.2.9",
    "@angular/platform-browser": "5.2.9",
    "@angular/platform-browser-dynamic": "5.2.9",
    "@ionic-native/core": "4.6.0",
    "@ionic-native/screen-orientation": "^4.6.0",
    "@ionic-native/splash-screen": "4.6.0",
    "@ionic-native/status-bar": "^4.6.0",
    "@ionic/storage": "2.1.3",
    "angularfire2": "^5.0.0-rc.9",
    "cordova-android": "6.3.0",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-screen-orientation": "^3.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.3",
    "es6-promise-plugin": "^4.2.2",
    "firebase": "^5.0.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.8",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.20"
  

我这样得到了恐怖   my image eror

TypeError: Object(...) is not a function
    at SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:81649:76)
    at SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:66537:27)
    at SwitchMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20704:18)
    at RefCountSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20740:26)
    at RefCountSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20704:18)
    at Subject.next (http://localhost:8100/build/vendor.js:23191:25)
    at ConnectableSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20740:26)
    at ConnectableSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20704:18)
    at Notification.observe (http://localhost:8100/build/vendor.js:51804:50)
    at AsyncAction.DelaySubscriber.dispatch (http://localhost:8100/build/vendor.js:83939:40)

1 个答案:

答案 0 :(得分:0)

使用angularfire2对firebase的编码风格有一些改变,我也有同样的问题。

这是解决方案 https://stackoverflow.com/a/50447449/6567753