Ionic 3中如何计算多卡片金额总和？代码输出异常求助

嘿，我一眼就看出问题出在哪了，这两个小错误导致你的金额变成字符串拼接而非数值累加：

核心问题点 #

• 循环未正确获取数组内的卡片金额：你在循环里一直累加的是this.amount，但这应该是单个输入框的临时值吧？你真正要累加的是bindlcdetails数组里每一张卡片的金额，得取this.bindlcdetails[i].amount才对。
• 类型不匹配引发字符串拼接：输入框获取的内容默认是字符串类型，直接用+号会触发字符串拼接逻辑，而不是数值加法——这就是为什么输入10和20后，结果变成了"1020"。

修复后的代码 #

我调整了代码，解决了这两个问题：

this.itemCount = this.bindlcdetails.length;
this.totalamount = 0;
for(let i = 0; i < this.bindlcdetails.length; i++){
  // 取出当前卡片的金额并转为数值类型
  const currentAmount = Number(this.bindlcdetails[i].amount);
  // 防止转换失败出现NaN，无效金额按0处理
  this.totalamount += isNaN(currentAmount) ? 0 : currentAmount;
}
return this.totalamount;

更简洁的写法（可选） #

如果偏爱更简洁的代码，可以用数组的reduce方法实现累加，逻辑完全一致：

this.itemCount = this.bindlcdetails.length;
this.totalamount = this.bindlcdetails.reduce((total, item) => {
  const amount = Number(item.amount);
  return total + (isNaN(amount) ? 0 : amount);
}, 0);
return this.totalamount;

这样修改后，输入10和20就能得到预期的30啦～

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