Angular披萨店网店购物车：如何正确计算并展示10%VAT

我正在为一家披萨店开发Angular网店，已经完成购物车组件和购物车服务的开发，需要给每个商品添加10%的VAT（增值税）并计入总价。但目前页面上service和total显示的数值完全相同，希望调整代码让service单独显示总增值税金额，total显示商品总价加增值税的总和。

当前相关代码如下：

购物车服务（cart.service.ts） #

calcTotal() {
    let total: number = 0;
    let service: number = 0;

    this.cart.forEach((val) => {
      service = val.price * 0.1;
      total += val.price + service;
    })
    return total;
  }

购物车组件（cart.component.ts） #

export class CartComponent implements OnInit {
  cart: Imenu[] = [];
  total: number = 0;
  service: number = 0;

  constructor(private CS: CartService) { }
  ngOnInit(): void {
    this.cart = this.CS.getCart();
    this.total = this.CS.calcTotal();
    this.service = this.CS.calcTotal();
  }
}

模板（cart.component.html） #

<div class="col-md-5 col-lg-4 order-md-last">
        <p>Service: {{service}}</p>
        <p>Total: {{total}}</p>
    </div>
</div>

1. 重构购物车服务的计算逻辑 #

现在的calcTotal方法只返回了含增值税的总价，而且组件里直接把同一个方法的返回值同时赋值给total和service，自然两者数值相同。我们可以修改服务，让它一次性计算出税前总价、总增值税和税后总价，通过返回对象的方式提供这些值：

// cart.service.ts 修改后的calcTotal方法
calcTotal() {
  // 先计算所有商品的税前总价
  const subTotal = this.cart.reduce((sum, item) => sum + item.price, 0);
  // 计算总增值税（10%）
  const vatAmount = subTotal * 0.1;
  // 计算税后总价
  const total = subTotal + vatAmount;

  // 返回包含所有金额的对象
  return { subTotal, vatAmount, total };
}

2. 调整组件中的赋值逻辑 #

在组件里调用修改后的方法，分别把对应的值赋值给组件属性：

// cart.component.ts 修改后的代码
export class CartComponent implements OnInit {
  cart: Imenu[] = [];
  total: number = 0;
  service: number = 0; // 保留原变量名，也可以改成vatAmount更直观

  constructor(private CS: CartService) { }
  ngOnInit(): void {
    this.cart = this.CS.getCart();
    const cartCalculations = this.CS.calcTotal();
    this.total = cartCalculations.total;
    this.service = cartCalculations.vatAmount; // 把总增值税赋值给service变量
  }
}

3. 模板无需额外修改 #

原来的模板代码可以直接使用，因为我们保留了service和total变量名：

<div class="col-md-5 col-lg-4 order-md-last">
    <p>Service: {{service}}</p>
    <p>Total: {{total}}</p>
</div>

额外说明 #

• 使用reduce方法计算税前总价比forEach更简洁，逻辑也更清晰
• 统一计算总增值税，避免逐个商品计算后累加可能出现的浮点精度问题
• 如果觉得service这个变量名不够准确，可以改成vatAmount，同时对应修改模板中的变量名即可

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