如何在Angular的*ngFor循环中获取输入框的对应值？

哈哈别尴尬！这种*ngFor里输入框绑定后全变成同一个值的问题，我刚学Angular的时候也踩过坑，太常见了😎

核心原因 #

大概率是你没有给每个循环项分配独立的绑定变量：比如用了一个全局的qty变量让所有输入框绑定，或者数组里的元素是同一个对象引用，导致改一个全跟着变。

正确解决方案 #

方案1：用双向绑定（最简洁） #

先确保你的数据数组里，每个对象都自带qty属性（用来存对应输入框的值）：

// 组件里的数组
products = [
  { id: 1, name: '商品A', qty: 0 },
  { id: 2, name: '商品B', qty: 0 },
  { id: 3, name: '商品C', qty: 0 }
];

然后模板里直接绑定到每个item的qty属性，每个输入框的绑定都是独立的：

<div *ngFor="let product of products">
  <label>{{ product.name }}</label>
  <input type="number" [(ngModel)]="product.qty" min="0" />
  <!-- 实时预览当前值 -->
  <span>当前数量：{{ product.qty }}</span>
</div>

方案2：用(change)事件手动更新 #

如果你更习惯用事件触发的方式，那要确保更新的是对应索引的数组元素属性，而不是全局变量：

<div *ngFor="let product of products; let i = index">
  <label>{{ product.name }}</label>
  <input 
    type="number" 
    [value]="product.qty" 
    (change)="updateQty($event.target.value, i)" 
    min="0"
  />
  <span>当前数量：{{ product.qty }}</span>
</div>

组件里的方法要精准修改对应索引的元素：

updateQty(qtyStr: string, index: number) {
  // 转成数字类型，避免存字符串
  this.products[index].qty = Number(qtyStr);
}

避坑提醒 #

• 别用单个变量（比如let qty = 0）让所有输入框绑定，那样肯定会同步变化；
• 如果你的数组是通过重复push同一个对象生成的（比如for (let i=0; i<3; i++) this.products.push(sameObj)），要改成每次创建新对象，否则所有元素共享同一个引用，改一个全变。

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