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

Question

So I am having this issue on Angular 4.

I have this button in my html template markup:

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

I have the data assing to each td from a *ngFor, so I have the {{ data.id }} that I can use on this record, but how can I assign it to my delete method correctly, I tried using:

<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>

But none seem to work, so any advice or guidance would be greatly appreciated.

Answer 1

just pass data.id to delete function

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

and then in your delete function

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

Answer 2

You can declare index in your *ngFor like so

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

Then you can use it in your template like so

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

And in your class do something like this

public items = [];

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

   //Do what you want with item
}

• I used "_delete" because "delete" is a reserved word in TypeScript/JavaScript