如何在Ionic 3中获取价格和数量之间的总和/计算?

时间:2019-02-12 21:23:44

标签: php json ionic3 calculated-columns

我需要一些帮助。

如何从价格和数量(如购物车)中获取总价? 我从教程中尝试过但不起作用

transaction.html

  <ion-list>
    <ion-item>
      <ion-thumbnail item-left>
        <img src="http://example.com//picture/souvenir/{{item.photo}}">
      </ion-thumbnail>
      <ion-row>
      <h2>{{item.name}}</h2>
      </ion-row>
      <p>QTY
        <input type="number" #quantity
        value="1" style="width: 50px;border: 1px solid #5a5a5a;height: 25px;
        border-radius: 20px;text-align: center;">  <!-- Qty -->
      </p>
      <p #retailPrice>Price :&nbsp;Rp. {{item.price}} </p> <!-- Price -->
      <p><b>Total Price:&nbsp;Rp. {{total}}</b></p> <!--This Total Price-->
    </ion-item>
  </ion-list>

transaction.ts

export class TransactionPage {

  item: any;
  userdata: any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams) 
  {
    this.item = this.navParams.get("item"); 
    this.userdata = JSON.parse(localStorage.getItem('userlogin')) || [];
    console.log(this.userdata);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TransactionPage');
  }
}

如果数量“ 5”和价格“ 100” =总价格“ 500”,我需要

请帮助
预先感谢

1 个答案:

答案 0 :(得分:0)

您应该使用ngModel来定义哪个变量将保留数量编号。之后,您只需要计算价格*数量

请参阅文档以了解更多信息:https://angular.io/api/forms/NgModel

transaction.html

 <ion-list>
    <ion-item>
      <ion-thumbnail item-left>
        <img src="http://example.com//picture/souvenir/{{item.photo}}">
      </ion-thumbnail>
      <ion-row>
      <h2>{{item.name}}</h2>
      </ion-row>
      <p>QTY
        <input [(ngModel)]="quantity" type="number" #quantity
        value="1" style="width: 50px;border: 1px solid #5a5a5a;height: 25px;
        border-radius: 20px;text-align: center;">  <!-- Qty -->
      </p>
      <p #retailPrice>Price :&nbsp;Rp. {{item.price}} </p> <!-- Price -->
      <p><b>Total Price:&nbsp;Rp. {{item.price * quantity}}</b></p> <!--This Total Price-->
    </ion-item>
  </ion-list>

transaction.ts

export class TransactionPage {

  item: any;
  userdata: any = [];

  quantity = 0;

  constructor(public navCtrl: NavController, public navParams: NavParams) 
  {
    this.item = this.navParams.get("item"); 
    this.userdata = JSON.parse(localStorage.getItem('userlogin')) || [];
    console.log(this.userdata);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TransactionPage');
  }
}