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

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

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

不再需要：）

Editng Table逐行索引

1 个答案: