Angularfire 2 и Ionic 2

Я использую 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 для каждого объекта (строк), чтобы получить ИТОГО (сумму) в этом списке? Заранее спасибо!


firebase typescript angular firebase-realtime-database angularfire2
person CaribeSoft    schedule 02.03.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Что ж, если вы подпишетесь на свой 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();
   }
}

Удачного кодирования!

person dlcardozo    schedule 02.03.2017
comment
Привет, Камарон, это работает! , большое спасибо, единственное, что мне нужно сделать, чтобы это работало для меня, - это импортировать {Subscription} из 'rxjs / Subscription'; если у кого-то такая же проблема. Ты мужчина !! - person CaribeSoft; 02.03.2017
comment
Один вопрос: если я хочу фильтровать по имени рестана, что мне нужно делать в функции ngOnInit? Я имею в виду, что хочу сосчитать только все, что restaname = «Одно конкретное имя». заранее спасибо - person CaribeSoft; 09.03.2017
comment
В этом случае вы должны изменить свой запрос здесь: this.carrito = af.database.list('/carrito', { query: { orderByChild: 'restaname', equalTo: this.restaName } }); - person dlcardozo; 09.03.2017
comment
Спасибо за ваш быстрый ответ, к настоящему моменту у меня уже есть запрос: this.carrito = af.database.list ('/ carrito', {query: {orderByChild: 'restaname', equalTo: this.restaName}} ); При привязке данных в шаблоне фильтр (запрос) работает нормально. Но если я добавлю запись с другим именем restname, она все равно будет рассчитывать на функцию ngOnInit (). Надеюсь вы понимаете меня . Подобно тому, как запрос не работает с функцией, он считает все записи. - person CaribeSoft; 09.03.2017
comment
Отметьте это решение там, где вы добавляете новую запись: stackoverflow.com/questions/35177288/ - person dlcardozo; 09.03.2017
comment
Чтобы уточнить, я был неправ, функция работает хорошо, а также запрос, я искал другую функцию, извините, и еще раз спасибо за ваши советы! - person CaribeSoft; 10.03.2017