问题 * ng如何使用索引将数组中的每个项绑定到ngModel

===最后更新==

因为我在表单中使用ngModel，所以我必须添加 name attribue。

而我的错误在于我使用了与其名称相同的值。

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

==========

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

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

- -更新 - - -

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

<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

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

2296

2018-01-14 16:50

起源

请先查看文档 angular.io/docs/ts/latest - Günter Zöchbauer

你为什么不绑定 x.Name？ - Tamas Hegedus

@TamasHegedus可能不起作用（不完全确定），但我记得那些错误消息 [(ngModel)]="..." 不适用于模板变量，但除此之外，一个很好的建议 - 绝对值得一试。 - Günter Zöchbauer

你使用的是angular2形式吗？ - micronyks

你能提供plunker吗？ - micronyks

答案:

它应该是 [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>

2018-01-14 16:51

谢谢@micronyks我不确定他是否想要双向绑定。是 ng-model 双向自动？我对Angular1了解不多。 - Günter Zöchbauer

是的，默认情况下是 Angular1.x 欢迎你！ - micronyks

谢谢你的回答。你能告诉我怎样才能在控制器（component.ts文件）中获得[（ngModel）] =“x.Name”的值？ - sirius2013

加 (ngModelChange)="methodOnController($event)" - Günter Zöchbauer

在你的情况下先生，如果你使用* 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>

2018-01-14 17:12

谢谢你的回答。你能告诉我怎样才能在控制器（component.ts文件）中获得[（ngModel）] =“x.Name”的值？ - sirius2013

问题 * ng如何使用索引将数组中的每个项绑定到ngModel

答案:

热门问题