How can I get the total price in my cart by getting the sum of all the prices?

Ionic Framework ionic-v3
1

I’m using Ionic 3 and Firebase as my Database How can I get the total price on my cart?

This is my Html, dynamic data from firebase

<ion-content padding>
    <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 the transcript, Which also display the data from my firebase cart

 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()
2

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

total = 0;

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

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>