2017-01-20 3 views
3

私は初心者です。編集するアイテムのインデックスを使用してテーブル行を編集する方法を知りたいと思います。また、特定の項目のIDを見つけるために関数trashGame()を使用しようとしているため、jqueryを使用して行の項目のインデックスを取得することは可能ですか?すべての行は、テーブルの上にその編集ボタンがあります。Editngテーブル行インデックスby

<table> 
    <tr> 
    <th colspan=3>Games</th> 
    <th>No of Players</th> 
    <th>Action</th> 
    </tr> 

    <tbody> 
    <tr *ngFor="let game of Games; let row_no = index"> 
     <td>{{row_no + 1}}</td> 
     <td>{{game.id}}</td> 
     <td>{{game.name}}</td> 
     <td>{{game.no_of_players}}</td> 
     <td><button class="deleteBtn" (click)="trashGame()">Delete</button></td> 
    </tr> 

    </tbody> 
</table> 

これは私のサービスです。

removeGame(id) { 
    return this.http.delete('url ' + id) 
     .map((response: Response) => response.json()) 
     .subscribe(
      data => console.log(data) 
    ); 
} 

ゲームコンポーネント:

trashGame() { 
    // get id of the game 

    var index = 

} 
+0

なぜ使用jqueryのか? –

+0

おっと..私はそれがとにかく動作すると思った。 – XamarinDevil

+0

@BarryMeijer、アイテムのインデックスまたはitem_idを使用してテーブル行を編集するにはどうすればよいですか?あなたができるなら私を助けてください – XamarinDevil

答えて

2

それはあなたがあなたのテーブルに渡すことも簡単ですゲームを削除します。あなたはゲームを反復しているので、各行はゲームを表し、その行にそのボタンがあるので、それはその特定のゲームに属します。だから、単にあなたの削除法にパラメータとしてゲームを渡す:

<tr *ngFor="let game of Games; let row_no = index"> 
    <td>{{row_no + 1}}</td> 
    <td>{{game.id}}</td> 
    <td>{{game.name}}</td> 
    <td>{{game.no_of_players}}</td> 
    <td><button class="deleteBtn" (click)="trashGame(game)">Delete</button></td> 
</tr> 

と:もっと必要

trashGame (game) { 
    console.log(game.id) 
    // here you can call the service method with your id 
} 

何も:)あなたは明らかにAngular2で作業している

関連する問題