javascript - 如何在 Angular4 中删除表中的行。删除按钮位于每一行

Question

组件

<tr *ngFor="let item of items; let i = index">
    <th>{{ i +  1 }}</th>
    <th>{{ item.id }}</th>
    <td>{{ item.title }}</td>
    <th><button (click)="deleteItem()">Edit</button></th>
  </tr>

项目.服务

deleteItem(){
let header =  new HttpHeaders();
return this._http.delete(this.api);

我假设我应该在删除按钮上附加该项目的 id。但我不知道如何实现。

我正在使用新的 HttpClient

Answer 1

您可以将item作为参数传递给deleteItem作为

<tr *ngFor="let item of items; let i = index">
  <th>{{ i +  1 }}</th>
  <th>{{ item.id }}</th>
  <td>{{ item.title }}</td>
  <th><button (click)="deleteItem(item)">Edit</button></th>
</tr>

现在，根据您的实际 API 端点，您可以执行类似的操作

deleteItem(item: any){
  return this._http.delete(this.api + '/items/' + item.id);
}