Angular：HTML获取数值用于JS数学运算出现字符串拼接问题求解

错误原因 #

HTML中单选框的value属性默认是字符串类型，所以通过[(ngModel)]绑定到numArray的元素实际是字符串（比如"0"、"1"）。JavaScript里的+运算符遇到字符串会执行拼接操作，而非数值相加，所以你得到的是字符串拼接结果，而非预期的数值求和。

优化方案 #

方案1：绑定数值类型的value（推荐） #

把HTML里的value改成属性绑定[value]，直接传入数值，这样numArray中存储的就是数字类型，求和时无需额外转换：

<input type="radio" [value]="0" [(ngModel)]="numArray[0]">
<input type="radio" [value]="1" [(ngModel)]="numArray[0]">

<input type="radio" [value]="0" [(ngModel)]="numArray[1]">
<input type="radio" [value]="1" [(ngModel)]="numArray[1]">

<input type="radio" [value]="0" [(ngModel)]="numArray[2]">
<input type="radio" [value]="1" [(ngModel)]="numArray[2]">

TS端直接求和即可：

let sum = 0;
for(let i=0;i<this.numArray.length;i++){
    sum += this.numArray[i];
}
console.log(`Sum result ${sum}`);

方案2：求和时转换数据类型 #

如果不想修改HTML，在求和过程中将字符串转为数字类型，常用方法有两种：

let sum = 0;
for(let i=0;i<this.numArray.length;i++){
    // 方法1：用Number()转换
    sum += Number(this.numArray[i]);
    // 方法2：用+运算符隐式转换
    // sum += +this.numArray[i];
}
console.log(`Sum result ${sum}`);

方案3：用数组reduce方法简化求和 #

用数组的reduce方法可以更简洁地完成求和，同时处理类型转换：

const sum = this.numArray.reduce((total, current) => total + Number(current), 0);
console.log(`Sum result ${sum}`);

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