Question

我对离子和firebase相对较新，直到我碰到这个错误，我试图从我的离子应用程序更新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代码

 <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函数中调用。

“运行时错误_this.listBills.update不是函数”

Answer 1

this.billListRef= afDb.list('/bills').valueChanges(); this.listBills = this.billListRef;为您提供了一个Observable，而不是对Firebase列表的引用。

变化：

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})函数。

    [OperationContract]
    [WebInvoke(Method = "GET",
       ResponseFormat = WebMessageFormat.Json,
       RequestFormat = WebMessageFormat.Json,
       BodyStyle = WebMessageBodyStyle.Bare,
       UriTemplate = "GetAllStars")]
    List<Star> GetAllStars();

[OperationContract]
[WebInvoke(Method = "POST",
   ResponseFormat = WebMessageFormat.Json,
   RequestFormat = WebMessageFormat.Json,
   BodyStyle = WebMessageBodyStyle.Bare,
   UriTemplate = "Save")]
Star Save(Star st);

[DataContract]
public class Star
{
    [DataMember]
    public string id { get; set; }
...}

更新firebase数据时出现运行时错误

1 个答案: