Runtime Error updating firebase data

Question

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.

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

 <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.

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

Answer 1

valueChanges() gives you an Observable and not a reference to Firebase list.

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.

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