Question

我正在生成带有响应的离子卡。每个离子车都有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);
  }

我认为，绑定按钮值存在问题，但我无法弄明白。我确信事件数组正在填充响应，因为离子卡的其他部分填充正确。

Answer 1

您可以直接传递给方法整个对象，而不是使用按钮的值，例如：

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

在你的pushParticipants方法中，期望整个事件对象

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

动态填充按钮

1 个答案: