angular - this.object.remove 不是函数
问题描述
我的情况与此非常相似: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"
}
这是menu.ts:
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
}
非常感谢您的支持和帮助。
解决方案
解决了。这是我的错误。答案与运行时错误 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);
推荐阅读
- excel - Excel COM 粘贴不起作用 - 无法获取 Worksheet 类的粘贴属性
- docker - 谷歌运行 - 每个容器实例是否得到 443,如果这是我需要的
- api - 如何将 Julia 与 HTML 网页集成 - 如何从运行在 Web 浏览器中的应用程序调用 Julia 函数
- c# - EF将子实体添加到父实体
- powershell - 列出组成员的简单脚本
- python - 基于用户输入的类创建自动化
- javascript - 如何创建自定义 npm react 组件并在另一个 react 应用程序中使用它,例如“react-dropdown-select”
- powerbi - 如何动态消除顶行?
- java - snapscraft snap.yaml 用于在 ubuntu 上使用 swing ui 的 Java 应用程序
- c++ - 枚举变量的值不正确