Angularfire 2とイオン2

Question

私はFirebaseとイオン2及びAngularfire 2を使用しています、これは私のデータ構造である：

これは私のコードです：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> 

私は角度の炎2 documeこのリストのTOTAL（合計）を得るには、各オブジェクト（行）からitem.precioフィールドを要約するにはどうすればよいですか？ 事前に、ありがとう！

Answer 1

あなたがcarritoを購読すれば、あなたは必要な値を得られます。

のは、それをやってみましょう：

//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(); 
    } 
} 

コーディング

ハッピー！