Angularfire 2 and Ionic 2

Question

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

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 !

dlcardozo · Accepted Answer · 2017-03-02T04:57:13.083

2

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!

edited Mar 02 '17 at 04:57

answered Mar 02 '17 at 02:09

dlcardozo

3,953
1
18
22

Hey Camaron, it works! , thank you very much, the only thing I have to do to make it works for me was import { Subscription } from 'rxjs/Subscription'; if somebody have the same problem. You're the man !! – CaribeSoft Mar 02 '17 at 05:12
One question, if I want to filter by restaname, what do I need to do in the ngOnInit fuction ? I mean I want only to count all that restaname = 'One particular name'. Thank you in advance – CaribeSoft Mar 09 '17 at 20:11
In that case you should change your query here: `this.carrito = af.database.list('/carrito', { query: { orderByChild: 'restaname', equalTo: this.restaName } });` – dlcardozo Mar 09 '17 at 20:17
Thank for your quick response, by the moment that is the way I have the query : this.carrito = af.database.list('/carrito', { query: { orderByChild: 'restaname', equalTo: this.restaName } }); When binding the data in the template the filter(query) is working OK. But If I add a record with a different restname It still counts on ngOnInit() the function. Hope you understand me . Like the query is not working on the function, it counts all records. – CaribeSoft Mar 09 '17 at 20:29
Check this solution in the place where you add the new record: http://stackoverflow.com/questions/35177288/angular2-firebase-realtime-updating-not-working – dlcardozo Mar 09 '17 at 20:38
Just to clarify, I was wrong, the function is working good, and also the query, I was looking into another function, sorry, and again thank you for your tips ! – CaribeSoft Mar 09 '17 at 23:01

Angularfire 2 and Ionic 2

1 Answers1