Angular 2：ngFor循环中如何为每个输入框绑定不同响应值

嘿，这个问题我做项目时也踩过坑！你现在的代码只是循环生成了input，但没把每个输入框和对应的item数据关联起来，所以一绑定就会出现所有框共用同一个值的情况。下面给你两种实用的解决方式，根据你的需求选就行：

1. 双向数据绑定（推荐用于需要修改数据的场景） #

如果希望用户修改输入框内容时，能同步更新对应的item数据，用Angular的[(ngModel)]双向绑定最合适。只需要把input和当前循环项的具体属性绑定起来：

<div *ngFor="let item of items">
  <input type="text" class="form-control" [(ngModel)]="item.textValue">
</div>

这里的textValue是item对象里的属性，你可以换成自己实际定义的属性名（比如name、content都可以）。对应的组件里，你的items数组应该是类似这样的结构：

// 组件.ts文件里的定义
items = [
  { textValue: '默认值1' },
  { textValue: '默认值2' },
  { textValue: '默认值3' }
];

⚠️ 注意：使用[(ngModel)]需要在你的模块（比如AppModule）里导入FormsModule，否则会报错：

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

@NgModule({
  imports: [
    // 其他已导入的模块
    FormsModule
  ],
  // 其他模块配置
})
export class AppModule { }

2. 单向绑定（仅用于展示数据的场景） #

如果只是需要把item的值展示在输入框里，不需要用户修改后同步回数据，用[value]单向绑定就够了：

<div *ngFor="let item of items">
  <input type="text" class="form-control" [value]="item.textValue">
</div>

这种方式下，输入框会显示对应item的属性值，但用户修改输入内容不会改变原items数组里的数据。

另外你原来的#inputTarget是模板引用变量，如果不需要获取input的DOM元素，直接去掉就行；如果需要保留，每个循环里的这个变量也是独立的，不会互相影响~

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