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

Question

我需要一些帮助。

如何从价格和数量获得总价格像购物车？我试过教程但没有工作

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”

请帮忙 提前致谢

Answer 1

您应该使用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');
  }
}