Runtime Error this.object.remove is not a function

Question

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)

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

HTML code:

<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>

Typescript code:

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!!!!

Answer 1

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();
  }

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

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

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