Ionic中修改数量后计算总价出现NaN问题求助

嘿，我一眼就看出问题所在啦——你的数量输入框没和组件里的quantity属性做双向绑定！

你看，价格输入框用了[(ngModel)]="price"，能把输入的数值同步到this.price里，但数量输入框只加了ionChange触发计算，却没绑定ngModel，这就导致this.quantity一直是undefined。当一个数字和undefined相乘时，结果肯定是NaN呀！

给你两个步骤快速修复：

1. 给数量输入框补上双向绑定 #

修改数量对应的ion-input，加上[(ngModel)]="quantity"，这样输入的数值才能同步到组件的quantity属性中：

<ion-item>
  <ion-label>Quantity</ion-label>
  <ion-input (ionChange)="getTotal()" type="number" [(ngModel)]="quantity"></ion-input>
</ion-item>

2. 初始化属性值（推荐操作） #

为了避免页面刚加载时price或quantity还是undefined，可以在组件类里提前给这两个属性设初始值：

// 组件类中添加初始化代码
price = 0;
quantity = 0;

getTotal(){
  this.totalPrice = this.price * this.quantity;
  console.log(this.totalPrice);
}

额外优化：处理异常输入（可选） #

虽然type="number"会限制输入类型，但偶尔还是可能出现非数字的异常情况，你可以在计算前做个类型转换，确保都是有效数字：

getTotal(){
  const validPrice = Number(this.price);
  const validQuantity = Number(this.quantity);
  this.totalPrice = validPrice * validQuantity;
  console.log(this.totalPrice);
}

这样修改后，你再调整数量或价格，就能正常计算出总价啦！

内容的提问来源于stack exchange，提问作者user6579134