Angular按钮事件处理器异常：添加商品至购物车无响应问题

你的购物车点击添加按钮无反应、商品不显示的问题，主要有以下几个关键原因及对应修复：

1. 表单控件缺少name属性（核心问题） #

Angular模板驱动表单中，使用[(ngModel)]双向绑定的表单控件必须添加name属性，否则表单的ngSubmit事件可能无法正常触发，同时ngModel的绑定逻辑也会失效。

修复后的表单代码：

<form (ngSubmit)="addItem()">
  <label for="newItemName">Item Name:</label>
  <input type="text" [(ngModel)]="newItemName" id="newItemName" name="newItemName" required>

  <label for="newItemPrice">Price:</label>
  <input type="number" [(ngModel)]="newItemPrice" id="newItemPrice" name="newItemPrice" required>

  <label for="newItemQuantity">Quantity:</label>
  <input type="number" [(ngModel)]="newItemQuantity" id="newItemQuantity" name="newItemQuantity" required>

  <button type="submit">Add Item</button>
</form>

2. 添加商品的条件判断不完善 #

当前addItem方法中，this.newItemPrice && this.newItemQuantity的判断会把0值判定为无效，但用户输入0时（比如0元商品），required属性不会阻止提交，导致符合业务逻辑的商品无法添加。建议修改为判断数值大于0：

修复后的addItem方法：

addItem() {
  if (this.newItemName.trim() && this.newItemPrice > 0 && this.newItemQuantity > 0) {
    const newItem: CartItem = {
      name: this.newItemName,
      price: this.newItemPrice,
      quantity: this.newItemQuantity,
      total: this.newItemPrice * this.newItemQuantity
    };
    this.cartItems.push(newItem);
    this.newItemName = '';
    this.newItemPrice = 0;
    this.newItemQuantity = 0;
  }
}

3. 确保购物车列表的完整结构 #

你提供的购物车列表仅包含<tbody>部分，需确保它被包裹在完整的<table>标签内，否则浏览器可能无法正确渲染表格内容：

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of cartItems">
      <td>{{item.name}}</td>
      <td>{{item.price | currency}}</td>
      <td>
        <input type="number" [(ngModel)]="item.quantity" (change)="updateQuantity(item)" min="1">
      </td>
      <td>{{item.total | currency}}</td>
      <td>
        <button (click)="removeItem(item)">Remove</button>
      </td>
    </tr>
  </tbody>
</table>

验证修复效果 #

完成以上修改后：

• 点击添加按钮会正常触发addItem方法
• 符合条件的商品会被添加到cartItems数组
• 购物车列表会通过*ngFor自动渲染新添加的商品

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