我想在Ionic 3的购物车中获得所有产品价格的总和

Question

This is my HTML

<ion-content padding>
  <ion-list *ngFor="let item of orderList$ | async">
    <ion-item>
      <ion-label text-wrap>
        <h2>{{item?.name}}</h2>
        <p  style="color: black">Quantity :  {{item?.qty}}</p>
         <p style="color: black">Price :  {{item?.price}}
         <p class="pr" style="font-weight: bold; color: black">Total :</p><p class="pr" style="color: red"> {{item?.total}}</p>
      </ion-label>
    </ion-item>
  </ion-list>

  <h1>Total Price Here</h1>
  <button ion-button block clear>Place Order</button>

This is my .ts

constructor(
public navCtrl: NavController, 
public navParams: NavParams,
private ord: OrderListService) {

  this.orderList$ = this.ord
  .getOrderList() // DB List
  .snapshotChanges() // Key and Value
  .map(
    changes => {
      return changes.map(c => ({
        key: c.payload.key, ...c.payload.val()
      }));
    });
}

I want to display the total Price of all the added products on my Cart

My Firebase Structure

My Cart

Answer 1

You can calculate the total after you get the data in orderList$:

total = 0;

this.orderList$.map(value =>{
   this.total = this.total + value.price;
}).subscribe();

And in HTML outside the ion-list :

<ion-item>
  <ion-label text-wrap>
     <p class="pr" style="font-weight: bold; color: black">Total :</p><p class="pr" style="color: red"> {{total}}</p>
  </ion-label>
</ion-item>