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()
      }));
    });
}

我要显示购物车中所有已添加产品的总价

My Firebase Structure

My Cart

Answer 1

您可以在获得orderList $中的数据后计算总数：

total = 0;

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

在ion-list之外的HTML中：

<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>

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

1 个答案: