如何在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>

Item.service

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

我假设我应该为该项目添加ID为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);
}

Answer 2

您应该只需要向您的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.id)">Edit</button></th>
  </tr>

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

Answer 3

只需在删除功能中传递商品ID即可

<th><button (click)="deleteItem(item.id)">Edit</button></th>

并在您的delete函数中获取该ID作为参数，然后传递给api

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

希望能帮助到你