如何将localStorage存储的购物车数据转为数组在Angular HTML购物车页展示

问题核心原因 #

你之前编写的getCart方法存在逻辑错误：localStorage中存储的localCart本身就是完整的商品数组，不需要循环逐位赋值，你之前的代码相当于循环10次把整个数组赋值给cartItems的单个下标位置，自然无法正常使用。

修正后的实现方案 #

1. 先定义组件变量

保留你原有的cartitem类型定义，声明所需变量：

// 购物车商品数组，初始为空
public cartItems: cartitem[] = [];
// 购物车商品总数量
cartItem: number = 0;
// 购物车总金额
totalAmount: number = 0;

2. 重写getCart方法

同时实现数据读取、数量更新、总金额计算：

getCart(){
  const localCart = localStorage.getItem('localCart');
  if(localCart){
    // 直接将解析后的完整数组赋值给cartItems
    this.cartItems = JSON.parse(localCart) as cartitem[];
    // 更新商品总数量
    this.cartItem = this.cartItems.length;
    // 计算总金额：累加所有商品的 单价*购买数量
    this.totalAmount = this.cartItems.reduce((sum, item) => {
      return sum + item.productPrice * item.qtty;
    }, 0);
    // 调试可查看输出
    console.log(this.cartItems, this.totalAmount);
  }else{
    // 本地无购物车数据时重置所有变量
    this.cartItems = [];
    this.cartItem = 0;
    this.totalAmount = 0;
  }
}

3. 调用时机

在组件初始化时调用方法加载数据，如果后续有添加/删除商品的操作，操作完成后再次调用getCart()即可刷新页面数据：

ngOnInit(): void {
  this.getCart();
}

页面渲染 #

你之前用静态数组实现的HTML渲染逻辑不需要修改，直接用*ngFor遍历cartItems即可，总金额可以直接通过插值表达式{{totalAmount}}渲染。

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