CODEWITHSUNDEEP
angulartypescriptfirebasefirebase-realtime-databaseangularfire2
CaribeSoft
CaribeSoft

Reputation: 597

Angularfire 2 and Ionic 2

I'm using Ionic 2 and Angularfire 2 with Firebase, this is my data structure:

enter image description here

This is my code : 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
      }

    });


}

This is my part of carrito.html (template)

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

I have been reading over Angular fire 2 documentation, Ionic 2 examples, and I have a silly question: How do I summarise the item.precio field from each object (rows) to get the TOTAL (sum) in this list ? In advance, thanks !

Upvotes: 2

Views: 373

Answers (1)

dlcardozo
dlcardozo

Reputation: 4013

Well, if you subscribe to your carrito you will get the value that you want.

Let's do it:

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

Happy coding!

Upvotes: 2

Related Questions