javascript - 运行时错误更新 firebase 数据

Question

我对 ionic 和 firebase 比较陌生，在我遇到这个错误之前一直很顺利，我正在尝试从我的 ionic 应用程序更新 firebase 中的 bool 数据，下面是我的组件代码。

import { AngularFireDatabase,AngularFireList  } from 'angularfire2/database';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController ,AlertController} from 'ionic-angular';
//import { HelloIonicPage } from "../hello-ionic/hello-ionic";
import { User } from "../../models/user";
import {AngularFireAuth} from 'angularfire2/auth';
import {LoginPage} from '../login/login';
import { BillsPage } from "../bills/bills";
import { MomentModule } from 'angular2-moment';

@IonicPage()
@Component({
  selector: 'page-welcome',
  templateUrl: 'welcome.html',


})
export class WelcomePage {
  listBills: AngularFireList<any>;
  user = {} as User;
  username: string;
  password: string;
  billListRef: any;
  constructor(public navCtrl: NavController, 
    private afauth: AngularFireAuth,
    private toastCtrl: ToastController,
    public navParams: NavParams,
    public afDb: AngularFireDatabase,
    private alertCtrl: AlertController
  ) {
    this.billListRef= afDb.list('/bills').valueChanges();
    this.listBills = this.billListRef;
    } 

  promptPayment(billId: string){
    let alert = this.alertCtrl.create({
      message: "Mark as Paid",
      buttons:[
        {
          text: "Cancel"
        },
        {
          text: "Mark as Paid",
          handler: data=>{
            this.listBills.update(billId, {paid: true});
            // this.toastCtrl.create({
            //   message: "Mark as paid clikcked",
            //   duration: 3000,
            //   position: "middle",
            //   cssClass: "toast"

            // }).present();

          }
        }
      ]

    });
    alert.present();
  }

html代码

 <ion-card>
        <ion-card-header>PENDING BILLS</ion-card-header>
        <ion-list>
            <ion-item text-wrap *ngFor="let bill of listBills | async" (click)="promptPayment(bill.id)" [class.hide]="bill.paid == true">
                <ion-icon name="timer" danger item-left></ion-icon>
                <h2>{{bill.name}}</h2>
                <h3>Total:<strong>${{bill.amount}}</strong></h3>
                <p>Pay Before <strong>{{bill.dueDate}}</strong></p>
            </ion-item>
        </ion-list>
    </ion-card>

我希望更新成功，但我一直报错，更新函数是在下面组件的promptPayment函数中调用的。

"Runtime error _this.listBills.update is not a function"

Answer 1

valueChanges() 为您提供一个 Observable 而不是对 Firebase 列表的引用。

改变:

this.billListRef= afDb.list('/bills').valueChanges();
this.listBills = this.billListRef;

到:

this.billListRef= afDb.list('/bills');//save reference to the list
this.listBills = this.billListRef.valueChanges();//get observable for the ngFor

您的update 函数需要在引用上调用。

this.billListRef.update(billId, {paid: true})