角度2のテーブルを複数行更新する

1つの送信ボタンで各行にデータを挿入しようとしています。だから私は、formタグ内のテーブルを含めると、このように実装：角度2のテーブルを複数行更新する

<form> 
<table> 
    <tr *ngFor="let item of list;let index = index> 
     <td>{{item.id}}</td> 
     <td>{{item.name}}</td> 
     <td><input [(ngModel)]="model[index]" id="{{item.id}}"></td> 
    </tr> 
</table> 
<button type="submit">Proceed</button> 
</form>

私がしたいと、そのボタンを提出「item.id」に関するに対して入力タグ内のデータを挿入することですが、私は「IDを取得することはできませんよ'ボタンを押してください。私が得ているのは、[75,76]という2つの行を更新する必要があることを考慮して、入力値の配列です。では、どのようにして各行に対してIDを取得したり、各エントリのデータを更新したりできますか？

出典

2016-11-24 Chetan Nandanwar

あなたのボタンを提出し、私のplunkerを確認してくださいので、あなたはindexsにあなたがそれを持っている方法を取得することができなくなりますforループの外にあります。フォームの送信機能を作成して、更新したいインデックスの「モデル」を介して送信関数ループに作成してみてください。 onSubmit関数は、モデルモデルにアクセスできます。 – btinoco

もし私がの中にサブミットボタンを入れると、それは各行にサブミットボタンを作成するでしょう。私はすべてのエントリーを提出するためにボタンを提出したいと思います。 –

正しい....それは私がフォームにサブミット関数を入れて、関数内から "モデル"にアクセスし、 "モデル"をループしてインデックスを取得するということです。 – btinoco

フォームにsubmit関数を追加し、submit関数で "model"変数にアクセスして、フィールドのすべてのインデックスを取得します。

class MyComponent{ 
    model:any; 

    OnSubmit(){ 

     window.alert(JSON.stringify(model); 

    } 

}

https://plnkr.co/edit/JZ94mTquGmRkq1Xmhgec?p=preview

出典

2016-11-24 18:18:42 btinoco

角度2のテーブルを複数行更新する

答えて

関連する問題