Ionic3、AngularFire - 属性 'remove' 在类型 'Observable<any[]>' 上不存在

Question

我一直在关注过时的教程 (this playlist in particular)，但在 AngularFire 4.0 和 AngularFire 5.0 之间切换时迷路了。这是一个实现 Firebase 的简单 CRUD 应用程序。代码很粗鲁，但我可以查看并 post 到数据库。

我正在尝试使用 firebase 中的密钥从节点中删除一个项目，但出现错误

Property 'remove' does not exist on type 'Observable<any[]>'.

这是我的 .ts 文件：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ActionSheetController } from 'ionic-angular';
import { AngularFireList, AngularFireDatabase } from 'angularfire2/database';
import { Matatu } from '../../models/matatu/matatu.interface';
import { Observable } from 'rxjs/Observable';

@IonicPage()
@Component({
  selector: 'page-owner-dash',
  templateUrl: 'owner-dash.html',
})

export class OwnerDashPage {

  matatuListRef$: Observable<any[]>;

  constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase, public actionShtCrtl: ActionSheetController) {
    this.matatuListRef$ = this.database.list('matatu-list').valueChanges();

  }

  ionViewDidLoad() {
    //
  }

  selectMatatu(matatu: Matatu){
    this.actionShtCrtl.create({
      title: `${matatu.matNumberPlate}`,
      buttons: [
        {
          text: 'Edit',
          handler: () => {
            //
          }          
        },
        {
          text: 'Delete',
          role: 'destructive',
          handler: () => {
            this.matatuListRef$.remove(matatu.$key);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            //
          }
        }
      ]
    }).present();
  }


}

这里是显示记录的 .html 代码。

...
<ion-list>
    <button ion-item *ngFor="let ma3 of matatuListRef$ | async" (click)="selectMatatu(ma3)">
      <h2 style="font-weight: bold;">{{ma3.matNumberPlate}}</h2>
      <h3>Driver: {{ma3.matDriver}}</h3>
      <h3>Status: {{ma3.matStatus}}</h3>
    </button>
  </ion-list>
...

我知道 FirebaseListObservable 被重构为 AngularFireList，但我将我的变量分配给了 Observable 类型。

matatuListRef$: Observable<any[]>;

最重要的是，当我尝试删除记录时，我在浏览器的控制台上收到错误 TypeError: _this.matatuListRef$.remove is not a function。

我该如何解决这个问题？非常欢迎所有建议和方法，但如果解决方案侧重于使用 AngularFireList.

，我将不胜感激

Answer 1

remove() 函数存在于从 Firebase 检索到的列表引用中，不是来自 valueChanges().

的 Observable

您需要设置

this.matatuListRef$ = this.database.list('matatu-list');

其次，你也不会从valueChanges()得到$key。您需要使用 snapshotChanges() 才能检索键和值。

this.matatuListAsync = this.matatuListRef$.snapshotChanges();

而不是

this.matatuListRef$ = this.database.list('matatu-list').valueChanges();

可以在*ngFor中使用this.matatuListAsync在HTML

中

<ion-list>
    <button ion-item *ngFor="let ma3 of matatuListAsync$ | async" (click)="selectMatatu(ma3)">
      <h2 style="font-weight: bold;">{{ma3.payload.val().matNumberPlate}}</h2>
      <h3>Driver: {{ma3.payload.val().matDriver}}</h3>
      <h3>Status: {{ma3.payload.val().matStatus}}</h3>
    </button>
  </ion-list>

最后在您的 remove() 电话中，

        this.matatuListRef$.remove(matatu.payload.$key);

Ionic3、AngularFire - 属性 'remove' 在类型 'Observable<any[]>' 上不存在

Ionic3, AngularFire - Property 'remove' does not exist on type 'Observable<any[]>'

firebase

ionic3

angular

angularfire5