Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Somar Items do Firebase

Prezados, bom dia. Tenho uma aplicação com firebase conforme o código a seguir. O que preciso fazer é totalizar os valores dos produtos comprados para saber o total da compra.

OBS: Essa aplicação está sobre ionic3.

Seguem os códigos abaixo:

home.ts

import { Item } from './../../models/item/item.model';
import { ItemListService } from './../../services/items-list/item-list.service';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
import { Observable } from 'rxjs/Observable';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  itemList$: Observable<Item[]>;
  items: Item[];

  constructor(
    public navCtrl: NavController,
    private itemList: ItemListService) {

    // monta a lista para exibição
    this.itemList$ = this.itemList
      .getItemsList()
      .snapshotChanges()
      .map(changes => {
        return changes.map(c => ({
          key: c.payload.key,
          ...c.payload.val()
        }));
      });
  }
}

home.html

<ion-header>
  <ion-navbar color="primary" text-center>
    <ion-title>
      Meu Carrinho
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>


  <ion-list>
    <ion-list-header>
      Items
    </ion-list-header>

    <ion-item *ngFor="let item of itemList$ | async">
      {{item.name}}
      <br />R$ {{item.price}}
    </ion-item>

  </ion-list>

  <ion-fab bottom center>
    <button navPush="AddItemPage" ion-fab>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-fab>
</ion-content>

item.model.ts

export interface Item {
    key?: string;
    name: string;
    quantity: number;
    price: number;
}

ItemListService.ts

import { Item } from './../../models/item/item.model';
import { Injectable } from "@angular/core";
import { AngularFireDatabase } from "angularfire2/database";

@Injectable()
export class ItemListService {

    private itemListRef = this.db.list<Item>('item-list');

    constructor(private db: AngularFireDatabase) {

    }

    getItemsList() {
        return this.itemListRef;
    }

    addItem(item: Item) {
        return this.itemListRef.push(item);
    }
}

Grato desde já !

2 respostas
solução!

Oi Jorge, tudo bem ?

Cara, dado que você já tem a lista e ela já tem o preço, receio que a melhor forma/mais fácil é você percorre-la pegando o preço e somando em alguma variavel para poder jogar na tela o resultado.

Oi Matheus, obrigado pela resposta, eu até pensei nisso, mas como sou novo em ionic, typescript, angular e a fins não consegui definir como codificar uma vez que a lista é percorrida no foreach já no html

  <ion-item *ngFor="let item of itemList$ | async">
      {{item.name}}
      <br />R$ {{item.price}}
    </ion-item>

Estou estudando typescript e angular que são base do ionic, por que acho que na verdade me falta ainda um pouco de embasamento.

De qualquer forma muito obrigado por responder !!! :D

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software