ngFor内的Angular2 ngModel(数据未绑定到输入) [英] Angular2 ngModel inside ngFor (Data not binding on input)

问题描述

这是我的Angular2应用程序，表中有输入字段.我的数据显示在select标记上，但在input字段中未显示使用input标记上的ngModel绑定的数据.

This is my Angular2 application with input fields inside table. My data is displaying on select tag but the data binded using ngModel on input tag is not been displayed in input field.

<form name="userForm">
<table>
<tr *ngFor="let item of itemList; let in =index">
  <td><select><option >{{item.FirstName}}</option></select></td>
  <td><input type="text" id="lastname" name="lastname" [(ngModel)]="itemList[in].lastname"></td>
  <td><input type="text" id="middlename" name="middlename" [(ngModel)]="itemList[in].middlename"></td>
</tr>
</table>
</form>

推荐答案

在ngFor循环内创建多个ngModel控件时，请确保为每个控件赋予唯一的name:

When creating multiple ngModel controls inside ngFor loop make sure to give each control unique name:

<form name="userForm">
<table>
<tr *ngFor="let item of itemList; let in = index">
  <td><input type="text" name="lastname-{{in}}" [(ngModel)]="item.lastname"></td>
  <td><input type="text" name="middlename-{{in}}" [(ngModel)]="item.middlename"></td>
</tr>
</table>
</form>

这篇关于ngFor内的Angular2 ngModel(数据未绑定到输入)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！