web-dev-qa-db-ja.com

* ngインデックスを使用して配列内の各アイテムをngModelにバインドする方法

===最終更新==

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>

belowsに変更すると、問題は解決します。

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

==========

申し訳ありませんが、x.Nameの代わりにnames [$ index] .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

だから、私の問題は正確に、なぜ初期値が欠落しているのですか？

angularngfor
18
Jinceon

そのはず [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>
11
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>
7
himanshu