2017-01-20 2 views
3

초보자이며 편집 할 항목의 인덱스를 사용하여 테이블 행을 편집하는 방법을 알고 싶습니다. 그것은 또한 특정 항목의 ID를 찾을 수 trashGame() 함수를 사용하려고하기 때문에 jquery를 사용하여 행의 항목 인덱스를 얻을 수 있습니까 작동하지 않습니다.Editng 테이블 행 인덱스로 행

<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로 작업