运行时错误 this.object.remove 不是函数

Question

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

    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 数据库中检索密钥。

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

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

Answer 1

问题是您的 this.employees 在调用 valueChanges() 之后不是对实时数据库的引用，而是列表数据的 Observable。有一个单独的变量指向引用。如果您想要密钥，请使用 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 函数中，使用引用从列表中删除项目。

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

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

运行时错误 this.object.remove 不是函数

Runtime Error this.object.remove is not a function

firebase

angularfire2

ionic3

angular