Angular电商项目点击add to cart按钮无法获取单个选中商品如何解决

核心问题原因 #

• 点击按钮时未将当前循环的单个商品参数传递给addToCart方法
• 组件中@Input() productItem未被赋值，该属性是为单个商品子组件设计的，在当前列表组件场景下不需要使用
• 依赖注入逻辑错误，MessengerService和CartService未正确注入到组件中，重复声明了cartService属性

具体修改步骤 #

1. 修改HTML模板代码 #

给事件绑定传递当前循环的product参数，同时修复删除按钮和更新路由的已有问题：

<tbody>
  <tr *ngFor ="let product of products ">
    <td> {{product.Name}}</td>
    <td> {{product.Category}}</td>
    <td> {{product.Price}}</td>
    <td> <img src = "../assets/ProductPic/{{product.Pic}}"></td>
    <td><button class="btn-danger" (click)="deleteProduct(product)"> Löschen </button></td>
    <td><button class="btn-change"  routerLink="/updateProduct/{{product.id}}" routerLinkActive="active"> Change </button></td>
    <td><button class="btn-cart" (click)="addToCart(product)"> In cart </button></td>
  </tr>
</tbody>

2. 修改product.component.ts代码 #

修复依赖注入、删除冗余声明、修改addToCart方法接收参数：

// 删掉没用的Input声明，当前列表组件不需要用productItem
// @Input()
// productItem!: Product;
products: any;
// 删掉下面三个冗余的未注入声明
// private msg!: MessengerService;
// private cartService!: cartService;
// cartService!: cartService;

// 构造函数加入服务注入，Angular会自动完成实例注入
constructor(
  private http: HttpClient,
  private msg: MessengerService,
  private cartService: CartService // 注意服务类名和你实际定义的保持一致即可
) {}

ngOnInit(): void {
  this.getProducts();
}
deleteProducts(){
  this.deleteProduct();
}

// 加参数接收模板传过来的单个商品
addToCart(product: Product){
  console.log(product) // 此处可正常拿到当前点击的商品
  this.cartService.productToCart(product).subscribe(() => {
    this.msg.sendMsg(product)
  })
}

getProducts()
{
  return this.http.get("products").subscribe(x => {
    this.products = x;
    console.log(this.products);
  });
}

// 修改删除方法接收参数，调用删除接口时带上商品ID
deleteProduct(product: Product)
{
  // 注意替换product.id为你实际商品模型中主键对应的字段名
  return this.http.delete(`products/${product.id}`).subscribe(x => {
    this.products = x;
    console.log(this.products);
  });
}

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