1

Tenho um array passado para um *ngFor, como faço para somar os valores de uma propriedade, vlr, por exemplo.

order=[
  {"qtd": Number(1),"vlr":Number(3.50)},
  {"qtd": Number(6),"vlr":Number(4.00)},
  {"qtd": Number(2),"vlr":Number(1.20)}
];
<div *ngFor="let e of order">
  <div *ngIf="e.qtd != 0">
    <ion-grid>
      <ion-row>        
        <ion-col width-33 text-center>
              <span>{{e.qtd}}</span>
        </ion-col>
        <ion-col width-33 text-center>
          <span>{{e.vlr}}</span>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</div>

2 Respostas 2

1

Sugiro que você processe o total no controller, poderia ser assim:

var order=[
  {"qtd": Number(1),"vlr":Number(3.50)},
  {"qtd": Number(6),"vlr":Number(4.00)},
  {"qtd": Number(2),"vlr":Number(1.20)}
];
var total = order.reduce( function(a, b){
        return a + b['vlr'];
    }, 0);
    
console.log(total);

Usei Array#Reduce para efetuar a soma. O total você pode salvar em uma variável de escopo e exibir onde precisar.

1

Como você quer a soma de todos elementos, não se deve colocar dentro do ngFor que é onde você apresenta algo para cada elemento. Se você não quiser seguir a recomendação do Lucas Costa, você pode utilizar:

{{order.reduce((acumulado,linha) => acumulado + linha.vlr, 0)}}

Por exemplo:

<div *ngFor="let e of order">
  <div *ngIf="e.qtd != 0">
    <ion-grid>
      <ion-row>        
        <ion-col width-33 text-center>
              <span>{{e.qtd}}</span>
        </ion-col>
        <ion-col width-33 text-center>
          <span>{{e.vlr}}</span>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</div>
<div>Total: {{order.reduce((acumulado,linha) => acumulado + linha.vlr, 0)}}</div>

Porém acredito que você talvez queira o valor multiplicado pela quantidade, que fica:

{{order.reduce((acumulado,linha) => acumulado + linha.qtd * linha.vlr, 0)}}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .