Редактирование строк строк по индексу строки

Question

Я начинаю, и я хочу знать, как редактировать строку таблицы, используя индекс редактируемого элемента. Я также могу использовать jquery, чтобы получить индекс элемента в строке, потому что я пытаюсь использовать функцию trashGame(), чтобы найти идентификатор определенного элемента, и он не работает. Каждая строка имеет кнопку редактирования на столе:

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

} 

Answer 1

Это так же легко, что вы в вашей таблице пройти которую вы хотите удалить. Поскольку вы повторяете игры, каждая строка представляет игру, и поскольку у вас есть эта кнопка в этой строке, она принадлежит к этой конкретной игре. Так просто пройти игру в качестве параметра в вашем удаления-метода:

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

Ничего более необходимое :)