Angular 2 - 与 NgFor 中的 NgModel 进行 2 路绑定

的文章：

在Angular 2中，我们可以使用NgFor指令和NgModel指令进行双向数据绑定。NgFor指令是Angular 2中的一个重要指令，它可以用于循环遍历一个集合，并为每个元素生成相应的模板。而NgModel指令则是用于在表单元素和模型之间建立双向数据绑定。

在使用NgFor指令和NgModel指令进行双向数据绑定时，我们需要注意一些细节。首先，我们需要确保使用NgModel指令的表单元素位于NgFor指令的模板内部。其次，我们需要为NgModel指令提供一个唯一的名称，以便在模板中引用。

下面是一个简单的示例代码，演示了如何在NgFor指令中使用NgModel指令进行双向数据绑定：

html
<div *ngFor="let item of items">
  <input [(ngModel)]="item.name" type="text">
</div>
<button (click)="addItem()">添加项目</button>

在上面的代码中，我们使用了NgFor指令循环遍历一个名为items的数组，并为每个数组元素生成一个input元素。每个input元素都使用了NgModel指令进行双向数据绑定，绑定的属性为item.name。这样，当用户在input元素中输入内容时，对应的数组元素的name属性也会被更新。

另外，我们还添加了一个按钮，用于向数组中添加新的项目。当用户点击按钮时，addItem方法会被调用，向items数组中添加一个新的项目。

注意事项

在使用NgFor指令和NgModel指令进行双向数据绑定时，需要注意一些事项。首先，NgFor指令会为每个生成的模板元素创建一个独立的作用域。这意味着在NgFor指令内部使用的变量只在该作用域内有效。因此，如果我们在NgFor指令外部定义了一个变量，想在NgFor指令内部使用，就需要使用let关键字来声明一个新的变量。

另外，由于NgFor指令会为每个生成的模板元素创建一个独立的作用域，如果我们在NgFor指令内部使用NgModel指令进行双向数据绑定，那么每个input元素都会有自己的数据模型。这就意味着在提交表单或者处理数据时，需要遍历所有的input元素，获取它们的值。

在Angular 2中，使用NgFor指令和NgModel指令进行双向数据绑定可以很方便地实现对集合数据的操作。通过NgFor指令，我们可以循环遍历集合，并为每个元素生成相应的模板。而NgModel指令则可以帮助我们建立表单元素和数据模型之间的双向数据绑定。但是需要注意的是，使用NgFor指令和NgModel指令进行双向数据绑定时，需要注意作用域的问题，并且在处理数据时需要遍历所有的表单元素。

希望本文能够对你在Angular 2中使用NgFor指令和NgModel指令进行双向数据绑定有所帮助。如果你还有其他疑问，可以参考Angular 2官方文档或者在社区中寻求帮助。