Question

您好我正在关注this tutorial，现在我无法从firebase实时数据库中删除记录。

（2018年6月11日更新） - 以前我怀疑在使用FirebaseListObservable时出现此错误，但事实证明使用AngularFireList时也会发生错误。

使用AngularFireList

Runtime Error
_this.produkkuListRef.remove is not a function

这是具有删除功能的页面：

fleks-bisnis-produkku.module.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ActionSheetController } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { ProdukItem } from '../../models/produk-item/produk-item.interface';

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

  produkkuList: AngularFireList<ProdukItem[]>;

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

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

  selectProdukItem(produkItem: ProdukItem){

    this.actionSheetCtrl.create({
      title: `${produkItem.itemName}`,
      buttons:[
        {
          text: 'Edit',
          handler: () => {
             // send the user to the EditProdukItemPage and pass the key as a parameter
          }
        },
        {
          text: 'Delete',
          role: 'destructive',
          handler: () => {
            //delete the current ProdukItem, passed in via the parameter
            console.log(this.produkkuListRef);
            this.produkkuListRef.remove(produkItem.$key);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log("The user has selected the cancel button");
          }
        }
      ]
    }).present();
  }

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

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

}

使用FirebaseListObservable

Runtime Error
_this.produkkuListRef$.remove is not a function

这是具有删除功能的页面：

fleks-bisnis-produkku.module.ts

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

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

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

@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,
    private actionSheetCtrl: ActionSheetController) {

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

  selectProdukItem(produkItem: ProdukItem){

    this.actionSheetCtrl.create({
      title: `${produkItem.itemName}`,
      buttons:[
        {
          text: 'Edit',
          handler: () => {
             // send the user to the EditProdukItemPage and pass the key as a parameter
          }
        },
        {
          text: 'Delete',
          role: 'destructive',
          handler: () => {
            //delete the current ProdukItem, passed in via the parameter
            console.log(this.produkkuListRef$);
            this.produkkuListRef$.remove(produkItem.$key);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log("The user has selected the cancel button");
          }
        }
      ]
    }).present();
  }

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

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

}

其他参考资料

这是导入上面页面的界面文件

produk-item.interface.ts

export interface ProdukItem{
    $key?: string;
    itemName: string;
    itemHarga: number;
}

这是我的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": "^6.2.0",
    "rxjs-compat": "^6.2.0",
    "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"
}

我一直在google上搜索，似乎我的代码是正确的。可能导致此错误的原因是什么？

非常感谢你的帮助。

Answer 1

您声明this.produkkuListRef$如下：

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

根据doc，它返回“作为JSON对象的同步数组的数据的Observable。”。

您无法在此对象上调用remove()，您必须在列表本身上执行此操作，例如：

this.produkkuList1Ref$ = this.database.list('produk-list');
....
this.produkkuList1Ref$.remove(produkItem.$key)

请参阅此文档的part。

this.angularFireList.remove不是一个函数

使用AngularFireList

使用FirebaseListObservable

其他参考资料

1 个答案: