Formulareingabewert in einer ngFor generierten Tabelle

Question

Ich möchte eine Nummer für jeden Spieler in der Tabelle übermitteln können.

Ich erzeuge eine Tabelle mit * ngFor in Angular2.
Für jedes Element in dieser Tabelle füge ich ein Formular mit einem Eingabefeld hinzu.

Wie kann ich den Eingabewert aus diesen Formularen übermitteln und einbeziehen?

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

Ich konnte den Wert nicht aus dem Eingabefeld senden und abrufen.
Doing es für ein statisches Formular, wo ich id="inputname" und #inputname definieren und dann zu den (submit)="onBid(inputname.value)" Arbeiten hinzufügen kann.

Ich habe versucht adding id={{player.id}} und #{{player.id}}, aber weiß nicht, wie man es zu onBid() hinzufügen.

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

Wenn Sie das gesamte Formular "posten" möchten, warum nutzen Sie nicht ngModel gebunden an ein Array oder ein Objekt. Hier

ist eine Probe mit einem Array:

@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); 
    } 
} 

und mit einem Objekt:

@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); 
    } 
} 

dieses plunkr Siehe: https://plnkr.co/edit/Ox4HmliuX3ESdf8JIZgr?p=preview.