Angular中如何基于初始值实现增减计数器功能

问题根源 #

• 全局quantity变量会让所有遍历出的商品条目共享同一个数值，无法独立控制每个商品的数量调整
• 直接使用{{item.cantidad}}作为输入框值只是单向渲染，没有建立双向数据绑定，且点击事件未针对当前条目修改对应属性

修改步骤 #

1. 调整TS逻辑，移除全局变量并新增条目操作方法 #

不需要单独的quantity全局变量，直接操作数组中每个item的cantidad属性：

constructor(private datosService: DatosService) {
  // 假设articulos数组已通过服务获取，每个item自带cantidad初始值（如94、60）
}

// 增加当前商品数量
incrementQuantity(item: any) {
  item.cantidad += 1;
}

// 减少当前商品数量（可选：防止数量为负）
decrementQuantity(item: any) {
  if (item.cantidad > 0) {
    item.cantidad -= 1;
  }
}

2. 修改HTML模板，绑定当前条目属性 #

将点击事件改为调用对应方法并传入当前item，同时给输入框绑定item.cantidad实现双向同步：

<tr *ngFor="let item of articulos">
  <td>{{item.articulo}}</td>
  <td>{{item.cantidad}}</td>
  <td>
    <input type="button" value="-" (click)="decrementQuantity(item)">
    <input type="text" name="quantity" [(ngModel)]="item.cantidad">
    <input type="button" value="+" (click)="incrementQuantity(item)">
  </td>
</tr>

补充说明 #

• 使用[(ngModel)]双向绑定需要确保在对应模块中导入FormsModule：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他模块导入
    FormsModule
  ]
})
export class YourFeatureModule { }

• 若不想用双向绑定，也可以用单向绑定[value]="item.cantidad"，但需额外监听输入框变更事件同步item.cantidad，不如双向绑定简洁。

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