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

Ionic somar valores de uma lista

Bem pessoal, eu estou usando Angularfire2 no Ionic 2, pois bem, eu consegui criar uma lista de produtos pelo firebase(o banco de dados que estou usando), essa lista é como se fosse o carrinho de um aplicativo de loja, só que eu queria meio que pegar o valor de cada produto no carrinho e soma-los, para mostrar o valor total. Alguma dica?

6 respostas

Oi Fábio!

Acho que não entendi sua pergunta, tipo, iterar na lista assim que você a trazer da API e somar cada valor e guardar o resultado em uma propriedade do componente não resolve?

Hm... Tipo, sabe como em uma nota fiscal aparece o valor de cada produto, e la embaixo o total? Eu quero fazer exatamente isso, eu conseguir no meu html mostrar o valor de cada produto, só que eu não sei como pegar a variavel 'Price' de cada um, e somar, eu vi um tutorial para ionic 1 ensinando, porém estou usando o ionic 2 e não funciona... Eis o 'tutorial' que vi: https://pt.stackoverflow.com/questions/147378/como-somar-resultados-de-uma-lista-e-exibir-resultado-em-uma-popup-no-ionic

Desculpe se eu estiver parecendo um pouco "lerdo", estou mexendo no ionic pela primeira vez e consegui fazer tudo normal, mas quando chegou nessa sessão de somar todo o carrinho eu não consigo.

Cole o código completo do seu componente no qual você esta pegando os dados que deseja. A partir desse ponto posso dar algumas recomendações.

Além disso, poste também como é a estrutura desse cara retornado.

Ok vamos lá, no .TS:

Adicionei o Observable em uma variável items: Observable<any[]>;

Liguei ao banco de dados no constructor:

this.items = db.list('/Users/' + userId + '/Carrinho/').valueChanges();

E então no html eu puxo os dados com o 'item.Price'... assim:

 <ion-list>
  <ion-item   >
    <ion-thumbnail item-start>
<!-- Chamar imagem do produto -->
      <img src={{item.Imagem}}>
    </ion-thumbnail>
<!-- Chamar nome do produto -->
    <h2 text-wrap>{{item.Produto}}</h2>
<!-- Chamar valor unitário do produto -->
    <h2 item-end>R$ {{item.Price}}</h2>
  </ion-item>
</ion-list>

Outros valores que estão no firebase é o 'item.Quantidade' e o 'item.Total', no caso o valor total é igual a quantidade que a pessoa adicionar no carrinho vezes o Price...

A ligação como pode ver é bem simples, agora só falta da o valor ao somar todos os itens que esta nesse local:

this.items = db.list('/Users/' + userId + '/Carrinho/').valueChanges();

solução!

Vou escrever uma solução simples, usando ES5 sem nada sofisticado, fazendo um loop usando for mesmo:

this.items = db.list('/Users/' + userId + '/Carrinho/').valueChanges();
let total = 0;
for(let i = 0; i < this.items.length; i++ ) {
}    total = total + this.items[i].NomeDaPropriedadeComOValor;
// nova propriedade `total` que você terá que criar
this.total = total;

Agora, em qualquer lugar do seu template você pode acessar o total com {{ total }}.

O curso de Ionic 2 tem como pré-requisito o curso de Angular e este do de ES6. Depois dá uma conferida lá para você ficar melhor do que já é em Ionic. Se conhecer Angular, usar Ionic fica praticamente impossível.

Nossa muito muito obrigado cara, você me ajudou muito, pode deixar que vou me dedicar ao máximo para melhorar ainda mais, para quem sabe no futuro eu possa ajudar os outros como você esta me ajudando hoje.