angular - 按行索引编辑表格行

Question

我是初学者，想知道如何使用待编辑项的索引来编辑表格行。我是否也可以使用 jquery 来获取行中项目的索引，因为我正在尝试使用函数 trashGame() 来查找特定项目的 id 但它没有工作。表格中的每一行都有其编辑按钮:

<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

在您的牌 table 上传递您要删除的游戏同样容易。由于您正在迭代游戏，因此每一行代表一个游戏，并且由于您在该行上有该按钮，它属于该特定游戏。因此，只需将游戏作为参数传递到您的删除方法中:

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

不再需要:)