ngFor生成テーブルのフォーム入力値

Question

テーブル内の任意のプレーヤーの番号を送信したいと考えています。

私はAngular2の* ngForでテーブルを生成しています。
そのテーブルの各要素に対して、入力フィールドを含むフォームを追加します。

これらのフォームの入力値を送信して含めるにはどうすればよいですか？

<table> 
    <tr> 
     <th>Name</th> 
     <th>Value</th> 
     <th>Bid</th> 
    </tr> 
    <tr *ngFor="#player of players"> 
     <td>{{player.name}}</td> 
     <td>{{player.value | currency:'GBP':true:'4.0-0'}}</td> 
     <td> 
      <form role="form" (submit)="onBid($event, player)"> 
       <input type="number" min={{player.value}} value={{player.value}}> 
       <button type="submit">Bid</button> 
      </form> 
     </td> 
    </tr> 
</table> 

入力ボックスから値を送信して取得できませんでした。
id="inputname"と#inputnameを定義し、次に(submit)="onBid(inputname.value)"の作品にinputname.valueを追加する静的形式の場合は、

私はadding id={{player.id}}と#{{player.id}}を試しましたが、それをonBid()に追加する方法はわかりません。

Answer 1

working Demo

<td> 
      <form role="form" (submit)="onBid($event, player, name.value)"> 
       <input type="number" #name min={{player.value}} value={{player.value}}> 
       <button type="submit">Bid</button> 
      </form> 
</td> 

---

onBid(e,player,value) 
{ 
     player.inputValue=value; //<-----this will add new property to your existing object with input value. 
     console.log(player); 
} 

Answer 2

フォーム全体を「投稿」したい場合は、ngModelを配列またはオブジェクトにバインドするのはなぜですか？

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form role="form" (submit)="onBid($event, player)"> 
    <table> 
    <tr> 
     <th>Name</th> 
     <th>Value</th> 
     <th>Bid</th> 
    </tr> 
    <tr *ngFor="#player of players; #i=index"> 
     <td>{{player.name}}</td> 
     <td>{{player.value | currency:'GBP':true:'4.0-0'}}</td> 
     <td> 
     <input type="number" [(ngModel)]="bids[i]" 
       min="{{player.value}}" value="{{player.value}}"> 
     </td> 
    </tr> 
    </table> 
    <button type="submit">Bid</button> 
    </form> 
    ` 
}) 
export class AppComponent { 
    constructor() { 
    this.players = [ 
     (...) 
    ]; 
    this.bids = []; 
    } 

    onBid() { 
    console.log(this.bids); 
    } 
} 

と物体との：ここ

アレイを有するサンプルであるhttps://plnkr.co/edit/Ox4HmliuX3ESdf8JIZgr?p=preview：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form role="form" (submit)="onBid($event, player)"> 
    <table> 
    <tr> 
     <th>Name</th> 
     <th>Value</th> 
     <th>Bid</th> 
    </tr> 
    <tr *ngFor="#player of players; #i=index"> 
     <td>{{player.name}}</td> 
     <td>{{player.value | currency:'GBP':true:'4.0-0'}}</td> 
     <td> 
     <input type="number" [(ngModel)]="bids[player.name]" 
       min="{{player.value}}" value="{{player.value}}"> 
     </td> 
    </tr> 
    </table> 
    <button type="submit">Bid</button> 
    </form> 
    ` 
}) 
export class AppComponent { 
    constructor() { 
    this.players = [ 
     (...) 
    ]; 
    this.bids = {}; 
    } 

    onBid() { 
    console.log(this.bids); 
    } 
} 

このplunkrを参照してください。