Angular Ionic中if条件内布尔值比较失效问题求助

核心原因是HTML复选框的返回值是字符串类型，哪怕你设置的value是true/false，实际拿到的是"true"/"false"字符串，而非布尔值。控制台console.log显示的内容会让你误以为是布尔值，但用typeof this.carSeat就能确认它的类型是string，这也是用===匹配布尔true/false失效的原因。

解决方案 #

先将carSeat转换为布尔值，再进行条件判断，或者直接在条件中匹配字符串值：

方案1：先转换为布尔值

// 把字符串类型的carSeat转为布尔值
const hasCarSeat = this.carSeat === 'true';

if (hasCarSeat) {
  this.YesOrNo = "Yes";
  if (this.typeCar === "Sedan") {
    console.log(`if condition : ${hasCarSeat}`);
    this.Subtotal = this.sedanHourlyRate * this.hours + this.sedanFlatRate * this.days + this.carSeatHorlyFlatRate * this.hours + this.carSeatDailyFlatRate * this.days;
    this.SalesTax = (this.Subtotal * 13) / 100;
    this.total = this.Subtotal + this.SalesTax;
  }
  if (this.typeCar === "SUV") {
    this.Subtotal = this.suvHourlyRate * this.hours + this.suvFlatRate * this.days + this.carSeatHorlyFlatRate * this.hours + this.carSeatDailyFlatRate * this.days;
    this.SalesTax = (this.Subtotal * 13) / 100;
    this.total = this.Subtotal + this.SalesTax;
  }
} else {
  this.YesOrNo = "No";
  if (this.typeCar === "Sedan") {
    this.Subtotal = this.sedanHourlyRate * this.hours + this.sedanFlatRate * this.days;
    this.SalesTax = (this.Subtotal * 13) / 100;
    this.total = this.Subtotal + this.SalesTax;
  }
  if (this.typeCar === "SUV") {
    this.Subtotal = this.suvHourlyRate * this.hours + this.suvFlatRate * this.days;
    this.SalesTax = (this.Subtotal * 13) / 100;
    this.total = this.Subtotal + this.SalesTax;
  }
}

方案2：直接匹配字符串值

如果不想额外转换变量，也可以直接在条件判断里对比字符串：

if (this.carSeat === 'true') {
  // ... 原有逻辑
}
if (this.carSeat === 'false') {
  // ... 原有逻辑
}

额外提示 #

如果是直接操作DOM复选框元素，应该直接取元素的checked属性（本身就是布尔值），而不是value属性：

const carSeatCheckbox = document.getElementById('your-checkbox-id');
const hasCarSeat = carSeatCheckbox.checked;

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