Question

我正在关注this tutorial制作简单的Ionic 3 + Firebase CRUD。

我现在无法使用带有异步管道的FirebaseListObservable检索可观察列表。

当我到达调用FirebaseListObservable的页面时收到错误，但我不确定这是否与FirebaseListObservable相关。

Runtime Error
TypeError: Object(...) is not a function

这是Ionic Page，我无法在其中调用FirebaseListObservable。

fleks-bisnis-produkku.html

  <ion-navbar>
    <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>FleksBisnisProdukku</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <ion-list>

    <!-- Repeat the ion item for as many items that we have inside of our produk list -->
    <ion-item *ngFor="let item of produkkuListRef$ | async">
      <h2>Produk Name: {{item.itemName}}</h2>
      <h3>Produk Harga: {{item.itemHarga}}</h3>
    </ion-item>
  </ion-list>

  <div text-center>
        <button ion-button round (click)="pushToTambahProduk()">Tambah Produk</button>
    </div>
</ion-content>

fleks-bisnis-produkku.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

import { ProdukItem } from '../../models/produk-item/produk-item.interface';

/**
 * Generated class for the FleksBisnisProdukkuPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-fleks-bisnis-produkku',
  templateUrl: 'fleks-bisnis-produkku.html',
})
export class FleksBisnisProdukkuPage {

  produkkuListRef$: FirebaseListObservable<ProdukItem[]>;

  constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase) {

    /*
      Pointing produkkuListRef$ at Firebase -> 'shopping-list' node
      That means not only can we push things to database, but also we have access to everything inside of that node
    */

    this.produkkuListRef$ = this.database.list('produk-list').valueChanges();
  }

  pushToTambahProduk(){
    this.navCtrl.push('FbTambahProdukPage')
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FleksBisnisProdukkuPage');
  }

}

这是我的package.json：

{
  "name": "go-fleksales",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/pro": "1.0.20",
    "@ionic/storage": "2.1.3",
    "angularfire2": "^5.0.0-rc.10",
    "firebase": "^5.0.4",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

我非常感谢任何帮助。谢谢。

FirebaseListObservable返回Nothing，但Object（...）不是函数 - Ionic 3

0 个答案: