Angular 4將值從html模板傳遞到組件中的方法

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中的保留字