Angular 4 vorbei Wert von HTML-Vorlage auf ein Verfahren in einer Komponente

Question

So habe ich dieses Problem auf Angular 4.

ich diesen Knopf in meinem HTML-Template Markup haben:

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

Ich habe die Daten assing zu jeder td von a * ngFor, also habe ich die {{data.id}}, die ich für diesen Datensatz verwenden kann, aber wie kann ich es meiner Löschmethode richtig zuweisen, versuchte ich mit:

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

Aber keiner scheint zu funktionieren, also jeder Rat oder jede Anleitung würde sehr geschätzt werden.

Answer 1

passieren nur data.id Funktion

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

und dann in Ihre Löschfunktion löschen

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

Answer 2

Sie können Index in Ihrem * erklären ngFor wie so

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

Dann Sie können es in Ihrer Vorlage wie

verwenden

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

Und in der Klasse tun so etwas wie dieses

public items = []; 

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

    //Do what you want with item 
} 

• ich ein reserviertes Wort