Angular 12添加商品到购物车时报reading 'quantity' undefined错误

错误产生原因 #

• Cart类的resume属性仅定义了类型未初始化，默认值为undefined，调用updateCart方法时访问this.cart.resume.quantity就会抛出Cannot read properties of undefined (reading 'quantity')错误。
• updateCart方法逻辑存在缺陷：每次计算购物车汇总数据前未清空原有数值，会导致商品数量、金额重复累加，最终展示的计数和价格都不符合预期。
• 购物车状态使用普通Subject广播，仅会推送订阅后产生的新状态，组件订阅前已有的购物车初始数据不会被推送，导致页面加载初期购物袋计数为空。
• 原税费计算逻辑错误：每次遍历累加时基于累计的税前总金额计算税费，会导致税费被重复计算，总金额偏高。

修复步骤 #

1. 给Cart类的resume属性添加初始值 #

修改Cart类定义，初始化所有汇总字段为0：

import {Item} from '../models/item';

export class Cart {
  items:Item[] = [];
  resume:{quantity:number,costHT:number, costTaxe:number,costTTC:number} = {
    quantity: 0,
    costHT: 0,
    costTaxe: 0,
    costTTC: 0
  };
}

2. 修正updateCart计算逻辑 #

修改购物车服务的updateCart方法，每次计算前重置汇总字段，并且按单个商品计算税费后累加：

updateCart(){
  // 重置汇总数据，避免重复累加
  this.cart.resume = {
    quantity: 0,
    costHT: 0,
    costTaxe: 0,
    costTTC: 0
  };
  this.cart.items.forEach(item=>{
    this.cart.resume.quantity += item.quantity;
    // 先计算单个商品的税前金额，再累加对应税费和总价
    const itemCostHT = item.quantity * item.product.price;
    this.cart.resume.costHT += itemCostHT;
    this.cart.resume.costTaxe += itemCostHT * this.tva;
    this.cart.resume.costTTC += itemCostHT * (1 + this.tva);
  })
  this.emitCart();
}

3. 优化购物车状态广播逻辑 #

将普通Subject替换为BehaviorSubject，支持推送初始状态给后续订阅的组件：
首先修改购物车服务的导入：

import {Subject, BehaviorSubject} from 'rxjs';

然后替换cart$的定义：

// 初始化时传入当前购物车对象作为默认值
cart$ = new BehaviorSubject<Cart>(this.cart);

4. 可选优化：给头部组件的resume添加默认值 #

避免模板渲染时出现偶发的undefined警告：

resume:{quantity:number,costHT:number, costTaxe:number,costTTC:number} = {
  quantity: 0,
  costHT: 0,
  costTaxe: 0,
  costTTC: 0
};

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