Angular/TS中如何避免大量if语句计算表单选中项总价？

核心思路：用对象映射替代条件判断 #

把数据库中的价格数据转换成键值对结构的对象，直接通过表单数据的属性名匹配对应价格，彻底避免大量if/else或switch判断。

步骤1：定义价格映射对象 #

在Angular组件内维护与表单字段一一对应的价格配置（可从后端API获取后赋值）：

// 组件内的价格配置，支持从接口动态获取
servicePrices = {
  // 基础洗车尺寸对应的价格
  size: {
    small: 20,
    medium: 35,
    large: 50
  },
  // 附加服务对应的价格
  addOns: {
    seatCleaning: 15,
    waxing: 25,
    interiorShampoo: 40,
    tirePolish: 10
  }
};

步骤2：实现总价计算方法 #

利用对象键遍历匹配，高效计算总价：

subTotal(formData: any): number {
  let total = 0;

  // 累加基础洗车价格
  total += this.servicePrices.size[formData.size] || 0;

  // 遍历表单数据，累加选中的附加服务价格
  for (const [service, isSelected] of Object.entries(formData)) {
    if (this.servicePrices.addOns.hasOwnProperty(service) && isSelected) {
      total += this.servicePrices.addOns[service];
    }
  }

  return total;
}

示例表单HTML（参考） #

<form #carWashForm="ngForm" (ngSubmit)="onSubmit(carWashForm.value)">
  <!-- 基础尺寸选择 -->
  <div>
    <label>洗车尺寸</label>
    <input type="radio" name="size" ngModel value="small"> 小型
    <input type="radio" name="size" ngModel value="medium"> 中型
    <input type="radio" name="size" ngModel value="large"> 大型
  </div>

  <!-- 附加服务选择 -->
  <div>
    <label>附加服务</label>
    <input type="checkbox" name="seatCleaning" ngModel> 座椅清洁
    <input type="checkbox" name="waxing" ngModel> 打蜡
    <input type="checkbox" name="interiorShampoo" ngModel> 内饰清洗
    <input type="checkbox" name="tirePolish" ngModel> 轮胎上光
  </div>

  <button type="submit">提交并计算</button>
  <p>总价: {{ totalAmount | currency }}</p>
</form>

组件提交逻辑 #

在表单提交时调用计算方法：

totalAmount: number = 0;

onSubmit(formData: any) {
  this.totalAmount = this.subTotal(formData);
}

扩展优化点 #

• 若价格需从后端动态获取，仅需在组件初始化时通过API请求更新servicePrices对象，计算逻辑无需改动。
• 可将价格配置抽为独立服务（Service），方便多组件复用。

内容的提问来源于stack exchange，提问作者MTL Auto Corp