1

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

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に追加できる静的フォームに対してそれを行います。inputname.value(submit)="onBid(inputname.value)"

試してみましadding id={{player.id}}た#{{player.id}}が、に追加する方法がわかりませんonBid()。

4

2 に答える 2

3

動作デモ

<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);
}
于 2016-04-11T07:40:24.260 に答える
1

フォーム全体を「投稿」したい場合は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);
  }
}

そしてオブジェクトで：

@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 を参照してください: https://plnkr.co/edit/Ox4HmliuX3ESdf8JIZgr?p=preview。

于 2016-04-11T07:31:58.453 に答える