Question

所以我在Angular 4上遇到了这个问题。

我的html模板标记中有这个按钮：

<td><a class="btn btn-danger" (click)="delete()"><i class="fa fa-trash"></i></a></td>

我有来自* ngFor的每个td的数据，所以我有{{data.id}}我可以在此记录上使用，但我怎样才能正确地将它分配给我的删除方法，我尝试使用：

<td><a class="btn btn-danger" (click)="delete({{ data.id }})"><i class="fa fa-trash"></i></a></td>
<td><a class="btn btn-danger" (click)="delete(id)" [id]={{ data.id }}><i class="fa fa-trash"></i></a></td>

但似乎都没有用，所以任何建议或指导都会受到高度赞赏。

Answer 1

只需将data.id传递给删除功能

  <td><a class="btn btn-danger" (click)="delete(data.id)"><i class="fa fa-trash"></i></a></td>

然后在你的删除功能中

    delete(id : any){
console.log(id);
// perform your action
}

Answer 2

您可以在* ngFor中声明索引，如此

  <div *ngFor="let data of items; let i = index">

然后你就可以在你的模板中使用它了

 <a class="btn btn-danger" (click)="_delete(i)">....</a>

在你的课堂上做这样的事情

public items = [];

public _delete(i) {
   const item = this.items[i];

   //Do what you want with item
}

我使用了“_delete”，因为“删除”是TypeScript / JavaScript

Angular 4将值从html模板传递到组件中的方法

2 个答案: