【问题标题】:Angular2 ngModel inside ngFor (Data not binding on input)ngFor内的Angular2 ngModel(数据未绑定输入)
【发布时间】:2017-01-13 04:26:59
【问题描述】:

这是我的 Angular2 应用程序,表格内有输入字段。我的数据显示在select 标签上,但在input 标签上使用ngModel 绑定的数据未显示在input 字段中。

<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>

【问题讨论】:

  • 能否请您从输入标签中删除 id,这将导致 DOM 中的多个元素具有相同的 id,因为您在 for 循环中运行它。为什么不使用item.lastnameitem.middlename 而不是item[in].lastname
  • 我确定您必须在各自的组件中导入了FormsModule

标签: angular


【解决方案1】:

Yaroslav 方法的替代方案:将[ngModelOptions]="{standalone: true}" 设置为输入

附:确保你知道什么是独立选项https://angular.io/api/forms/NgModel#options

【讨论】:

    【解决方案2】:

    在 ngFor 循环中创建多个 ngModel 控件时,请确保为每个控件赋予唯一的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>
    

    【讨论】:

    猜你喜欢
    • 2016-11-20
    • 1970-01-01
    • 1970-01-01
    • 2016-11-07
    • 2016-11-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多