Angular 10心愿单列表图片src显示unknown异常问题求助

问题根因定位 #

• 首要问题是心愿单服务的新增接口存数据时多套了一层对象结构，导致读取属性时匹配失败
• 次要问题包含变量名拼写错误、可选属性未做兼容处理两类

具体修复方案 #

1. 修复WishlistItemService的addProductToWishlistItem方法 #

当前post逻辑把商品对象包了一层{product}，导致JSON里存储的结构多嵌套了一层，读取时直接取item.imageUrl自然为空。
修改后代码：

addProductToWishlistItem(product:Wish):Observable<any>{
  // 去掉外层包裹的{product}，直接传product对象，让属性平铺存储
  return this.http.post(wishlistitemUrl, product);
}

⚠️ 注意：改完后要先清空你JSON文件里旧的wishlistitem数据，避免旧的嵌套结构继续影响读取。

2. 优化getWishlistitem方法的属性读取兼容 #

如果不想删除旧数据，可以直接修改map逻辑里的属性读取路径，兼容嵌套结构：

map((result: any[]) => {
  let wishItem: Wish[]= [];
  for(let item of result) {
    // 兼容两种结构：如果item有product字段就取product下的属性，否则直接取item的属性
    const target = item.product || item;
    wishItem.push(new Wish(target.id, target.name, target.description, target.price, target.imageUrl));
  }
  return wishItem;
})

3. 排查修复属性不存在问题 #

你提到的carItem不存在对应属性是典型的拼写错误，检查所有用到这个变量的位置，确认是不是把cartItem（购物车项）或者wishItem（心愿单项）拼错成了carItem，修正变量名即可。

4. 可选兼容：图片加载失败兜底 #

可以给img标签加个fallback路径，避免属性异常时页面显示碎图：

<img class="shacker" [src]="wishitemItem.imageUrl || 'assets/default-product.png'" (error)="$event.target.src='assets/default-product.png'" />

验证步骤 #

1. 清空JSON文件中旧的wishlistitem数组内容
2. 重新点击添加收藏，确认JSON中存储的商品属性是平铺结构，没有外层product包裹
3. 打开心愿单页面，检查图片、名称等属性是否正常读取

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