[英]Runtime Error updating firebase data
I am relatively new to ionic and firebase, its been a smooth ride until I bumped into this error, am trying to update a boolean data in firebase from my ionic app, below is my component code. 我对ionic和firebase相对较新,在我遇到此错误之前一直很顺利,我试图从ionic应用程序更新firebase中的布尔数据,下面是我的组件代码。
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 code 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>
I expect the update to be successful, but I keep getting this error, the update function is called in the promptPayment function in the component below. 我希望更新能够成功,但是我一直收到此错误,在下面组件中的hintPayment函数中调用了update函数。
"Runtime error _this.listBills.update is not a function"
“运行时错误_this.listBills.update不是函数”
valueChanges()
gives you an Observable and not a reference to Firebase list. valueChanges()
为您提供了一个Observable,而不是对Firebase列表的引用。
Change: 更改:
this.billListRef= afDb.list('/bills').valueChanges();
this.listBills = this.billListRef;
to: 至:
this.billListRef= afDb.list('/bills');//save reference to the list
this.listBills = this.billListRef.valueChanges();//get observable for the ngFor
Your update
function needs to be called on the reference. 您的
update
函数需要在引用上调用。
this.billListRef.update(billId, {paid: true})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.