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的删除按钮。但我不知道如何实现它。

我正在使用新的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>

将删除函数中的id作为参数获取并传递给api

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

希望有所帮助

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

3 个答案: