動的に設定されたボタンの値が未定義

Question

私はレスポンス付きのイオンカードを生成しています。各イオンカーには3つのボタンがあります。私は応答を適切に受け取ることができると確信しています。しかし、私はボタンに価値を与えることはできませんまたは私は間違った方法でそれをやっています。私はpushParticipants（）関数を呼び出していますボタンをクリックすると、ここで

//は私のhtml

<ion-header> 

    <ion-navbar color='primary'> 
    <ion-title>events</ion-title> 
    </ion-navbar> 

</ion-header> 


<ion-content padding> 
<div class="row" *ngIf="events && events.length > 0"> 
    <ion-card *ngFor="let event of events"> 

    <img src="../../img/campus_background.jpg"/> 

    <ion-card-content> 
     <h1 class="card-title"> 
     {{event.name}} 
     </h1><br> 
     <p>Location: {{event.location}}</p><br> 
     <p> Start: {{event.start_hour}}</p><br> 
     <p> End: {{event.end_hour}}</p><br> 
     <p>Organizator: {{event.creator}}</p><br> 
     <p> Description: {{event.info}}</p><br> 
    </ion-card-content> 
     <ion-row no-padding> 
     <ion-col> 
     <button ion-button clear small [value]="event.id" (click)="addParticipant()" color="danger" icon-left> 
      <ion-icon name='person-add'></ion-icon> 
      Join 
     </button> 
     </ion-col > 
     <ion-col text-center> 
     <button ion-button clear small [value]="event.id" (click)="pushParticipants($event.target.id)" color="danger" icon-left> 
      <ion-icon name='people'></ion-icon> 
      {{event.id}} 
     </button> 
     </ion-col> 
     <ion-col text-right> 
     <button ion-button clear small [value]="event.id" color="danger" icon-left> 
      <ion-icon name='share-alt'></ion-icon> 
      Share 
     </button> 
     </ion-col> 
     </ion-row> 
    </ion-card> 
</div> 
</ion-content> 

です。私は、アラートにそのボタンの値をしようとしていますが、それは私がバインドボタンの値に問題がある、と思いますが、私はそれを把握することができませんでした

pushParticipants(id){ 
    alert(id); 
    } 

を私は「未定義」と言います。イオンカードの他の部分が正しく充填されているので、イベント配列が応答で正しく充填されていると確信しています。

Answer 1

代わりにボタンの値を使用して、あなたは次のように、メソッド全体のオブジェクトに直接渡すことができます。

<button ion-button clear small (click)="addParticipant(event)" color="danger" icon-left> 
... 
</button> 

そして、あなたのpushParticipants方法では、全体のイベントオブジェクト

pushParticipants(event) { 
    console.log(event); 
}