Angularfire 2 和 Ionic 2

Question

我将 Ionic 2 和 Angularfire 2 与 Firebase 结合使用，这是我的数据结构:

这是我的代码:carrito.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import {AngularFire, FirebaseListObservable, FirebaseObjectObservable}  from 'angularfire2';
import {ShareService} from '../../pages/services/ShareService';

 @Component({
   selector: 'page-carrito',
   templateUrl: 'carrito.html'
 })



 export class Carrito {
    public restaName:any;
    serviceData: string;
    items: Array<any>;

restas: FirebaseListObservable<any>;
carrito: FirebaseListObservable<any>;
 constructor(public navCtrl: NavController, public navParams: NavParams, af: AngularFire,
  private shareService: ShareService) {
    this.serviceData = shareService.getUserName();
    this.restaName = this.serviceData
    //alert(this.restaName)
    this.restas = af.database.list('/restas', {
      query: {
        orderByChild: 'nombre',
        equalTo: this.restaName
      }
    });


    this.carrito = af.database.list('/carrito', { 
      query: {
        orderByChild: 'restaname',
        equalTo: this.restaName
      }

    });


}

这是我的 carrito.html 部分(模板)

<ion-grid *ngFor="let resta of restas | async">
    <ion-row>
      <ion-col width-25><img style="margin-top: -10px" src="           {{resta.imagen}}" ></ion-col>
      <ion-col width-75>
        <h5>{{resta.nombre}}</h5>
        <span>Comida {{resta.comida}}</span>
        </ion-col>  
      </ion-row>
   </ion-grid>

   <ion-list>
    <ion-item  text-wrap *ngFor="let item of carrito | async ">
       <p> {{item.prodname}} </p>
       <p item-right> {{item.cantidad}} </p>
       <p item-right> ${{item.precio}} </p>
       <p item-right (click)="eliminaItem(item.$key)">
       <ion-icon name="trash"></ion-icon>      
      </p>
    </ion-item>  
   </ion-list>
   ***/////  HERE I WANT TO DISPLAY TOTAL (sum of item.precio) ////***
   <ion-footer *ngIf="total">
    <ion-toolbar>
    <ion-title>Total : $ {{total}} </ion-title>
    </ion-toolbar>  
    </ion-footer>
    <ion-toolbar>
    <button full primary clear (click)="sumAriza()">CHECK-OUT</button>
   </ion-toolbar>
   </ion-content>

我一直在阅读 Angular fire 2 文档、Ionic 2 示例，我有一个愚蠢的问题:如何汇总每个对象(行)中的 item.precio 字段以获得此列表中的 TOTAL(总和)？ 提前谢谢!

Answer 1

好吧，如果您订阅 carrito，您将获得您想要的值(value)。

让我们开始吧:

//add a total
total: number = 0;
//always save the subscription
totalSubscription: Subscription = null;

ngOnInit() {
   this.totalSubscription = carrito.subscribe((list:any) => {
      this.total = 0; // let's clear the total

      let fixedLength = list.length || 0;
      for (let i = 0; i < fixedLength; i++) {
         this.total += list[i].precio;
      }
   });
}

ngOnDestroy() {
   if (this.totalSubscription !== null) {
       this.totalSubscription.unsubscribe();
   }
}

祝你编码愉快!