Laufzeitfehler Aktualisieren Firebase Daten

Question

Ich bin relativ neu zu ionischen und firebase, es war eine reibungslose Fahrt, bis ich in diesen Fehler stieß, versuche, eine boolesche Daten in Firebase von meiner ionischen App zu aktualisieren, unten ist meine Komponente 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> 

Ich erwarte, dass das Update erfolgreich zu sein, aber ich halte diesen Fehler, die Update-Funktion ist in der promptPayment Funktion in der Komponente unten genannt.

„Laufzeitfehler _this.listBills.update ist keine Funktion“

Answer 1

valueChanges() gibt Ihnen einen beobachtbaren und nicht einen Verweis auf Firebase-Liste.

Wechsel:

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

zu:

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

Ihre update Funktion muss auf der Referenz genannt werden.

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