Angular过滤数组对象删除元素时出现filter未定义报错

算力阿峰

2026-8-31

错误根因

报错是因为你写的过滤逻辑完全搞错了数据层级，两个核心写法错误：

调用filter的主体不对。根据你定义的接口，Order类型里的products字段才是存储商品的数组。你写的this.order[0].filter()存在本质问题：
- 如果this.order是单个订单对象，this.order[0]取值为undefined（普通对象没有索引为0的属性）
- 如果this.order是订单数组Order[]，this.order[0]取到的是单个订单对象，而filter是数组专属方法，普通对象没有这个方法
  两种情况都会触发你看到的Cannot read properties of undefined (reading 'filter')错误。
过滤回调的字段访问路径错误。就算找对了要操作的数组，你写的p.products.productKey也会报错——遍历products数组时，每个遍历项p本身就是OrderProduct类型，直接自带productKey属性，不需要额外加.products层级访问。

修复代码

结合你的模板绑定逻辑（删除当前订单下的指定商品），this.order应该是单个Order类型对象，修改删除函数如下：

async deleteArticle(id: string): void {
  // 空值容错，避免订单未初始化时点击报错
  if (!this.order?.products) return;
  // 直接过滤当前订单下的products数组
  this.order.products = this.order.products.filter(product => product.productKey !== id);
  // 过滤完成后写入Capacitor Storage
  await Storage.set({ 
    key: 'current_order', 
    value: JSON.stringify(this.order) 
  });
}

如果你实际场景中this.order是存储多个订单的数组Order[]，需要先明确要操作的目标订单，比如操作第一个订单的写法：

async deleteArticle(id: string): void {
  // 空值容错
  if (!this.order?.[0]?.products) return;
  this.order[0].products = this.order[0].products.filter(product => product.productKey !== id);
  // 后续写入存储逻辑
  await Storage.set({ 
    key: 'order_list', 
    value: JSON.stringify(this.order) 
  });
}