运行时错误 this.object.remove 不是函数 [英] Runtime Error this.object.remove is not a function

问题描述

在我的 Ionic 应用程序中，我无法删除特定的键，它一直告诉我删除不是一个函数.在 angularfire2 上次更新之后，似乎有些事情发生了变化.它给了我这个错误:

In my Ionic app, I can't delete specific key, it keeps telling me that remove is not a function. It seems there are some things changed after the last updates in angularfire2. It gives me this error:

    Runtime Error
    this.employees.remove is not a function

TypeError: this.employees.remove is not a function
    at EmployeesPage.webpackJsonp.76.EmployeesPage.deleteEmployee (http://localhost:8100/build/main.js:319:24)
    at Object.eval [as handleEvent] (ng:///AppModule/EmployeesPage.ngfactory.js:47:31)
    at handleEvent (http://localhost:8100/build/vendor.js:12380:138)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:13850:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:13438:12)
    at dispatchEvent (http://localhost:8100/build/vendor.js:8972:21)
    at http://localhost:8100/build/vendor.js:9583:20
    at HTMLButtonElement.<anonymous> (http://localhost:8100/build/vendor.js:37400:53)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15040)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4238:33)

我也无法从我的 firebase 数据库中检索密钥.

I also unable to retrieve the key from my firebase database.

HTML 代码:

<ion-list>
<ion-item-sliding *ngFor="let employee of employees | async">
  <ion-item>
    <ion-avatar item-start>
      <img src="../../assets/imgs/avatar.png">
    </ion-avatar>
    <h2>{{ employee.fname }} {{ employee.lname }}</h2>
    <p>{{ employee.position }} at {{ employee.company }}</p>
    <p>Key: {{ employee.key }}</p>
  </ion-item>
  <ion-item-options side="left">
    <button ion-button color="secondary">
      <ion-icon name="create"></ion-icon>
      Edit
    </button>
    <button ion-button color="danger" (click)="deleteEmployee(employee.key)">
      <ion-icon name="trash"></ion-icon>
      Delete
    </button>
  </ion-item-options>
  <ion-item-options side="right">
    <button ion-button color="primary">
      <ion-icon name="eye"></ion-icon>
      View
    </button>
  </ion-item-options>
</ion-item-sliding>

打字稿代码:

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

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabase, AngularFireList  } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

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

  public employees: AngularFireList<any[]>;

  constructor(
    public navCtrl   : NavController,
    public navParams : NavParams,
    public empDb     : AngularFireDatabase
  )
  {
    this.employees = this.empDb.list('/emloyeesionic').valueChanges();
  }

  deleteEmployee(key: string)
  {
    this.employees.remove(key);
  }
}

我不知道是什么问题！！！！

I can't figure what the problem is!!!!

推荐答案

问题是你的 this.employees 在调用 valueChanges() 后不是对实时数据库的引用code> 但它是列表数据的 Observable.有一个单独的变量指向引用.如果您需要密钥，请使用 snapShotChanges()

Issue is your this.employees is not a reference to the real-time database after calling valueChanges() but is an Observable of the list data. Have a separate variable pointing to the reference. If you want the key, use snapShotChanges()

empRef:any;//the reference

constructor(
    public navCtrl   : NavController,
    public navParams : NavParams,
    public empDb     : AngularFireDatabase
  )
  {
    this.empRef = this.empDb.list('/emloyeesionic');
    this.employees = this.empRef.snapshotChanges();
  }

在 deleteEmployee 函数中，使用引用从列表中删除项目.

In deleteEmployee function, use the reference to delete the item from the list.

deleteEmployee(key: string)
  {
    this.empRef.remove(key);
  }

在您的 HTML 中，您将在 employee.payload.val() 中获得实际值并键入 employee.payload.key

In your HTML, you will get actual value in employee.payload.val() and key in employee.payload.key

这篇关于运行时错误 this.object.remove 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！