2016-11-24 42 views
0

我正在生成带有响应的离子卡。每个离子车有3个按钮。我确信我可以正确接受答复。然而,我无法给按钮赋予价值,或者我以错误的方式去做。动态填充按钮的未定义值

//这里是我的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()函数的按钮。我想提醒的是按钮的价值,但它说我“未定义”

pushParticipants(id){ 
    alert(id); 
    } 

我认为,没有与结合按钮值的问题,但我无法弄清楚。由于离子卡片的其他部分本身就是正确的,我相信事件阵列能够正确填充响应。

回答

0

而不是使用按钮的价值,你可以直接传递给该方法整个对象,如:

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

而在你pushParticipants方法预计整个活动对象

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

我肯定会接受那个答案只是给我7分钟:) – cano

+0

这很奇怪,你确定event.id真的存在吗?怎么样event.name,你可以在pushParticipants()中访问这个属性? –

+0

我解决了这个问题,谢谢你的回答 – cano