Angular中选择True/False时输入框数值增减异常问题排查

问题描述 #

需要实现：下拉选择「Yes」时输入框添加100卢比，选择「No」时输入框恢复为0。目前选择「Yes」功能正常，但切换回「No」时无法重置为0。

代码问题根源 #

1. HTML选项值类型不匹配：
   下拉选项的value属性是字符串类型的"false"和"true"，ngModelChange传递给addBillingOtherCharges的是这两个字符串值，而非布尔值。
2. TS判断逻辑错误：
   在addBillingOtherCharges方法中，判断if(e)时，字符串"false"在JavaScript中属于真值（truthy），所以永远不会进入else分支，也就无法执行重置为0的逻辑。

修复方案 #

步骤1：修正HTML的选项值绑定 #

使用[ngValue]绑定真正的布尔值，确保传递给TS的是布尔类型而非字符串：

<label>Add Rs 100</label>
<select class="form-select" name="casualty" id="casualty" [(ngModel)]="opd.casualty" (ngModelChange)="addBillingOtherCharges($event)">
  <option [ngValue]="false">No</option>
  <option [ngValue]="true">Yes</option>
</select>
<input type="number" name="totalAmt" id="totalAmt" [(ngModel)]="billingItem.totalAmount" (ngModelChange)="totalAmountEdited()">

步骤2：修正TS方法的参数与判断逻辑 #

将参数类型改为boolean，并基于布尔值做正确判断：

addBillingOtherCharges(isCasualty: boolean){
    if(isCasualty){
      this.billingItem.otherAmountKey = "Casualty";
      this.billingItem.otherAmountValue = 100;
    }else{
      this.billingItem.otherAmountKey = "";
      this.billingItem.otherAmountValue = 0;
    }
    this.calculateTotalAmount();
  }

calculateTotalAmount(){
    this.billingItem.totalAmount = 0;
    this.billingItem.totalAmount = (this.billingItem.otherAmountValue ?? 0) + (this.billingItem.amount ?? 0) - (this.billingItem.discountAmount ?? 0);
  }

totalAmountEdited(){
    this.billingItem.amount = 0;
    this.opd.casualty = false;
    this.billingItem.discountAmount = 0;
  }

注：这里用??空值合并运算符替代了原代码的判断，逻辑更简洁可靠。

备选方案（不修改HTML绑定） #

如果不想调整HTML的写法，也可以在TS里手动将字符串转换为布尔值后再判断：

addBillingOtherCharges(e: string){
    const isCasualty = e === "true";
    if(isCasualty){
      this.billingItem.otherAmountKey = "Casualty";
      this.billingItem.otherAmountValue = 100;
    }else{
      this.billingItem.otherAmountKey = "";
      this.billingItem.otherAmountValue = 0;
    }
    this.calculateTotalAmount();
  }

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