Angular中点击按钮如何将产品ID传入addProductsToBag方法提交至服务端

实现方案 #

1. 确认Product类属性配置 #

确保你封装的Product类对外暴露可访问的id字段，示例定义参考：

export class Product {
  public id: string;
  // 其余产品属性定义
  constructor(product: IProductInterface) {
    this.id = product.id;
    // 其余属性赋值逻辑
  }
}

2. 调整模板绑定点击事件 #

你的产品列表是通过遍历_products数组渲染的，在*ngFor循环中绑定当前产品的id到点击事件：

<!-- 产品列表循环结构 -->
<div *ngFor="let product of _products" class="productCard">
  <!-- 产品名称、图片等其余信息渲染逻辑 -->
  <button 
    class="productButton" 
    (click)="addSingleProductToBag(product.id)"
  >
    Add to bag
  </button>
</div>

3. 补充组件内点击处理逻辑 #

在组件类中新增点击回调方法，调用你已封装的提交方法即可：

// 注意你现有代码中userSrevice拼写有误，建议修正为userService
public addSingleProductToBag(productId: string): void {
  // 你封装的addProductsToBag接收字符串数组参数，所以将单个id包裹为数组传入
  this.addProductsToBag([productId]);
}

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