0

我一直在关注一个过时的教程（特别是这个播放列表），我在 AngularFire 4.0 和 AngularFire 5.0 之间切换时迷失了方向。这是一个实现 Firebase 的简单 CRUD 应用程序。代码很粗俗，但我可以查看并发布到数据库。

我正在尝试使用 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.

4

1 回答 1

2

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

你需要设置

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

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

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

代替

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

您可以this.matatuListAsync在*ngForHTML 中使用

<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);
于 2017-12-02T13:10:35.853 回答