Я хочу получить сумму всех цен на товары в моей корзине в Ionic 3

Question

Это мой 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>

Это мой .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()
      }));
    });
}

Я хочу отобразить общую цену всех добавленных товаров в моей корзине

Моя структура Firebase

Моя корзина

Answer 1

Вы можете рассчитать итоговое значение после получения данных в порядке: $ 1001 *

total = 0;

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

И в HTML вне 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>