Angular开发中如何正确计算购物车商品总价？

你当前代码存在3个核心问题导致总价无法正常计算渲染：

• 未绑定商品数量选择框的选中值，无法获取用户选择的商品购买数量
• 组件类中未编写总价计算逻辑
• 模板中总价区域错误放在商品循环内部，会重复渲染且未绑定实际数值

第一步：修改CartComponent组件代码 #

补充数量绑定属性、总价计算方法，同时优化删除逻辑避免数量缓存和商品列表不匹配的问题：

import { Component, Input, OnInit } from '@angular/core';
import { Product } from 'src/app/Model/Product';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent implements OnInit {
  @Input() cartList: Product[] = []
  itemQuantities: number[] = [1,2,3,4,5,6,7,8,9,10]
  // 存储每个商品对应的选中数量，默认初始值为1
  selectedQuantities: Map<Product, number> = new Map()

  ngOnInit(): void {
    // 初始化所有商品默认选中数量为1
    this.cartList.forEach(item => this.selectedQuantities.set(item, 1))
  }

  // 计算购物车总价格
  calculateTotalPrice(): number {
    let total = 0
    this.cartList.forEach(item => {
      const count = this.selectedQuantities.get(item) || 1
      total += item.price * count
    })
    return total
  }

  // 更新商品选中数量
  updateQuantity(item: Product, event: Event) {
    const value = Number((event.target as HTMLSelectElement).value)
    this.selectedQuantities.set(item, value)
  }

  DeleteItem(cartItem: Product){
    const indexOfCartItem = this.cartList.indexOf(cartItem)
    this.cartList.splice(indexOfCartItem, 1)
    // 删除商品时同步清掉对应的数量缓存
    this.selectedQuantities.delete(cartItem)
  }
}

第二步：修改Cart Template模板代码 #

给数量选择框绑定变更事件，把总价区域移出商品循环，绑定计算后的总价：

<section class="form-section">
  <div class="cart-list">
    <ul *ngFor="let cartItem of cartList">
      <img src="{{ cartItem.img }}" />
      <li>{{ cartItem.name }}</li>
      <li>单价：{{ cartItem.price }}</li>
      <button (click)="DeleteItem(cartItem)">Remove Item</button>
      <div>
        <select (change)="updateQuantity(cartItem, $event)">
          <option *ngFor="let itemQuantity of itemQuantities" [value]="itemQuantity" [selected]="itemQuantity === 1">
            {{ itemQuantity }}
          </option>
        </select>
      </div>
    </ul>
    <!-- 总价区域移到循环外，只渲染一次 -->
    <div class="total-area">
      <p>Total price: {{ calculateTotalPrice() }}</p>
    </div>
  </div>
</section>

可选优化 #

如果你的项目已经在模块中导入了FormsModule，可以直接用[(ngModel)]绑定数量，省去手动写change事件的步骤，代码会更简洁。

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