如何从 ionic 3 2018 的 firebase 读取数据 [重复]答案

【问题标题】：how to read data from firebase from ionic 3 2018 [duplicate]如何从 ionic 3 2018 的 firebase 读取数据 [重复]
【发布时间】：2018-05-22 07:25:11
【问题描述】：

任何人都可以帮助我从 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 上的许多教程一样使用异步

<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)

【问题讨论】：

标签： firebase firebase-realtime-database ionic3 angularfire2

【解决方案1】：

使用 angularfire2 的 firebase 的编码风格发生了一些变化，我遇到了同样的问题。

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

【讨论】：