Question

我一直在关注一个过时的教程（this playlist in particular），我在AngularFire 4.0和AngularFire 5.0之间失去了切换。这是一个简单的CRUD应用程序，它实现了Firebase。代码粗鲁，但我能够查看并发布到数据库。

我正在尝试使用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');

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

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

而不是

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

您可以在HTML

中的this.matatuListAsync中使用*ngFor

<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 []>'类型上不存在

1 个答案: