*ngFor 如何使用索引将数组中的每个项目绑定到 ngModel

Posted 2023-02-22

【中文标题】*ngFor 如何使用索引将数组中的每个项目绑定到 ngModel

【英文标题】：*ngFor how to bind each item in array to ngModel using index

【发布时间】：2017-05-29 21:08:12

【问题描述】：

===最终更新==

http://plnkr.co/edit/WKRBB7?p=preview

由于我在表单中使用ngModel，所以我必须添加name属性。

我的错误是我使用了与其名称相同的值。

<form #myform="ngForm">
    <table>
      <tr *ngFor="let staff of staffs">
         <td><input name="name" [(ngModel)]="staff.name">staff.name</td>
      </tr>
    </table>
</form>

我改成以下后，我的问题就解决了。

<form #my2form="ngForm">
   <table>
      <tr *ngFor="let staff of staffs;let i = index">
         <td><input name="staff.i.name" [(ngModel)]="staff.name">staff.name</td>
      </tr>
    </table>
</form>

===========

抱歉，我不记得为什么我使用 names[$index].Name 而不是 x.Name。

也许几年前我在使用 x.Name 时遇到了一些错误，然后养成了使用 index 的习惯。

---更新-----

我需要一个内联编辑表，双向绑定。

<table>
   <tr *ngFor="let x of names">
     <td><input [(ngModel)]="x.Name">x.Name</td>
   </tr>
</table>

let names = [
 Name:'jim',
 Name:'tom'
];

最初页面显示：

blank text field; jim

blank text field; tom

我在第一个文本字段中输入“aaaaaa”后，它变成：

aaaaaa; aaaaaa

blank text field; tom

我认为页面最初会显示：

jim; jim
tom; tom

所以，我的问题正是，为什么缺少初始值？

【问题讨论】：

请先查看文档angular.io/docs/ts/latest

为什么不直接绑定x.Name？

@TamasHegedus 可能无法正常工作（不完全确定），但我记得 [(ngModel)]="..." 不适用于模板变量的错误消息，但除此之外，这是一个很好的建议 - 绝对值得一试。

你在使用 angular2-form 吗？

你能提供plunker吗？

【参考方案1】：

应该是[ngModel]="..."

<table>
   <tr *ngFor="let x of names;let i = index;">
     <td> i+ 1 </td>
     <td><input [(ngModel)]="names[i].Name">x.Name</td>
   </tr>
</table>

【讨论】：

谢谢@micronyks 我不确定他是否想要双向绑定。 ng-model 是自动双向的吗？我对 Angular1 了解不多。

是的，默认情况下它在Angular1.x，欢迎您！

感谢您的回答。您能告诉我如何在控制器（component.ts 文件）中获取 [(ngModel)]="x.Name" 的值吗？

添加(ngModelChange)="methodOnController($event)"

【参考方案2】：

先生，如果您使用 *ngFor for 循环，那么我认为您不需要索引。为什么不直接使用 x.Name。这是修改后的代码。

<table>
       <tr *ngFor="let x of names;let i = index;">
         <td> i+ 1 </td>
         <td><input [(ngModel)]="x.Name">x.Name</td>
       </tr>
    </table>

或者你可以试试这个

<table>
           <tr *ngFor="let x of names;let i = index;">
             <td> i+ 1 </td>
             <td><input [value]="x.Name" [(ngModel)]="x.Name">x.Name</td>
           </tr>
        </table>

【讨论】：

感谢您的回答。您能告诉我如何在控制器（component.ts 文件）中获取 [(ngModel)]="x.Name" 的值吗？