Question

我的情况与此非常相似：Runtime Error this.object.remove is not a function。我已经采纳了这个建议，但还是没有运气。

确切的错误消息是 this.menuData.remove不是函数

我的主要目标是从AngularFireList中删除一项。

我的firebase节点的结构如下：

--menu
 |--user_key
   |--menu_key1    <-- to be deleted
     |--menu_name
     |--menu_price

这是我的 package.json ：

{
  "name": "brianAppResto",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "^5.1.3",
    "@angular/common": "^5.1.3",
    "@angular/compiler": "^5.1.3",
    "@angular/compiler-cli": "^5.1.3",
    "@angular/core": "^5.1.3",
    "@angular/fire": "^5.0.2",
    "@angular/forms": "^5.1.3",
    "@angular/http": "^5.1.3",
    "@angular/platform-browser": "^5.1.3",
    "@angular/platform-browser-dynamic": "^5.1.3",
    "@angular/platform-server": "^5.1.3",
    "@angular/router": "^5.1.3",
    "@ionic-native/core": "~4.15.0",
    "@ionic-native/splash-screen": "~4.15.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "2.2.0",
    "firebase": "^5.5.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "promise-polyfill": "^8.1.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

这是菜单：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController, ActionSheetController } from 'ionic-angular';
import { AddMenuPage } from '../add-menu/add-menu';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Menu } from './../../models/menu';

@IonicPage()
@Component({
  selector: 'page-menu',
  templateUrl: 'menu.html',
})
export class MenuPage {

  menuData: AngularFireList<Menu[]>;
  //menuRef: AngularFireList<Menu[]>;

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
    private toast: ToastController, private actionSheetCtrl: ActionSheetController,
    public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.toast.create({
          message: `Menu berhasil ditambahkan, ${data.email}`,
          duration: 3000
        }).present();

        this.menuData = this.afDatabase.list<Menu>(`menu/${data.uid}`).snapshotChanges();
        //this.menuData = this.menuRef.snapshotChanges();
      }
      else {
        this.toast.create({
          message: `Could not find authentication details`,
          duration: 3000
        }).present();
      }
    });
  }

  addMenu() {
    this.navCtrl.push('AddMenuPage');
  }

  selectMenu(menu: Menu) {
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.actionSheetCtrl.create({
          title: `${menu.menuName}`,
          buttons: [
            {
              text: 'Edit',
              handler: () => {
                // send user to edit menu page and pass the key as parameter

              }
            },
            {
              text: 'Delete',
              role: 'destructive',
              handler: () => {
                // send user to edit menu page and pass the key as parameter
                this.menuData.remove(`menu/${data.uid}/${menu.key}`);
              }
            },
            {
              text: 'Cancel',
              role: 'cancel',
              handler: () => {
                console.log("The user has selected the cancel button");
              }
            }
          ]
        }).present();
      }
      else {
      }
    });
  }
}

这是我的 menu.html ：

<ion-header>

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

</ion-header>


<ion-content padding>
  <button ion-button (click)="addMenu()">Tambah Menu</button>

  <ion-list>
    <ion-item *ngFor="let data of menuData | async" (click)="selectMenu(data)">
      <h2>Nama Menu: {{data.payload.val().menuName}}</h2>
      <h3>Harga: {{data.payload.val().menuPrice}}</h3>
      <h3>Key: {{data.payload.key}}</h3>
    </ion-item>
  </ion-list>

</ion-content>

这是我的 /models/menu.ts

export interface Menu {
  $key?: string,
  menuName: string,
  menuPrice: string
}

非常感谢您的支持和帮助。

Answer 1

已解决。是我的错答案与Runtime Error this.object.remove is not a function

几乎相同

我需要使用menuRef。

export class MenuPage {
menuData: AngularFireList<Menu[]>;
menuRef: AngularFireList<Menu[]>;

然后要从数据库加载（读取），我需要使用menuRef：

ionViewDidLoad() {
this.afAuth.authState.subscribe(data => {
  if(data && data.email && data.uid){
    this.toast.create({
      message: `Menu berhasil ditambahkan, ${data.email}`,
      duration: 3000
    }).present();

    this.menuRef = this.afDatabase.list<Menu>(`menu/${data.uid}`);
    this.menuData = this.menuRef.snapshotChanges();
  }

现在，要删除，我使用：

this.menuRef.remove(menu.key);

this.object.remove不是一个函数

1 个答案: