ionische wie identifiziert geklickte Schaltfläche in einem * ngFor Schleife

Question

Ich erstelle eine Liste von Text und Schaltflächen. Ich möchte identifizieren, welche Schaltfläche in der angeklickten Funktion angeklickt wurde.

HTML

<ion-list> 
    <ion-item ion-item *ngFor="let act of questions.test"> 
     {{act.quote}} 
     <ion-item> 
     <button large ion-button item-right (click)="SelectClicked()">Select</button> 
     </ion-item> 
    </ion-item> 
</ion-list> 

TS

this.questions = 
    { 
    "test":[ 
    { 
     "quote": "first row" 
    }, { 
     "quote": "second row" 
    }, { 
     "quote": "third row" 
    }, { 
     "quote": "fourth row" 
    } 
    ] 
    } 


SelectClicked(detail){ 
//please help 
// which button was clicked (1 to 4) ? 
    console.log("SelectClicked" + detail); 
} 

Answer 1

ich raten bin, dass Sie das wollen ausgewähltes Element, das ausgeführt werden kann, indem das Ereignis an den Handler übergeben wird.

<button (click)="SelectClicked($event)"></button> 

der Sie das Element aus dem Ereignis mit der Verwendung von event.target, event.srcElement oder event.currentTarget holen können.

Aber wenn man entlang der Index oder das Element Ihrer Array übergeben bedeutet, können Sie einfach auf das act Objekt übergeben oder einen Index zu der Schleife hinzufügen ...

<ion-item ion-item *ngFor="let act of questions.test; let i = index"> 

... und Pass auf dem Objekt ...

<button (click)="SelectClicked(act)"></button> 

... oder die ID

<button (click)="SelectClicked(i)"></button> 

Answer 2

Sie passieren kann die "handeln" Wert als Parameter an die Funktion wie diese

<button large ion-button item-right 
    (click)="SelectClicked(act)">Select 
</button>