如何在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);
}

希望能幫助到你