我有一张带两个按钮的卡片.点击卡片本身应打开详细信息页面：
<ion-card *ngFor="let appointment of appointmentList"
(click)="goToDetails(appointment)">
<ion-card-header>
<ion-item text-wrap>
<ion-icon start name="ios-medkit-outline"></ion-icon>
{{appointment.ProviderName}}
</ion-item>
<ion-row>
<ion-col width-50>
<button full ion-button color="secondary" (click)="confirmTrip()"> Confirm</button>
</ion-col>
<ion-col width-50>
<button full ion-button color="danger" (click)="cancelTrip()"> Cancel</button>
</ion-col>
</ion-row>
</ion-card-header>
<ion-list>
<ion-item *ngIf="!(appointment.Legs[0].AppTime==='')">
<ion-label>
Appointment time
</ion-label>
<ion-badge item-right>
{{appointment.Legs[0].AppTime}}
</ion-badge>
</ion-item>
<ion-item *ngIf="!(appointment.Legs[0].PickUpTime==='')">
<ion-label>
Pick up time
</ion-label>
<ion-badge item-right> {{appointment.Legs[0].PickUpTime}}</ion-badge>
</ion-item>
<ion-item>
<ion-label>
Driver status
</ion-label>
<ion-badge item-right>{{appointment.Legs[0].Status}}</ion-badge>
</ion-item>
</ion-list>
</ion-card>
单击按钮应触发单独的操作.现在,单击按钮可显示详细信息页面和这些特定操作.是否有任何机制可以将卡片的其他部分与按钮分开？
解决方法
我认为你必须通过使用event.stopPropagation()来检查按钮事件：
// HTML
<ion-item text-wrap>
<ion-icon start name="ios-medkit-outline"></ion-icon>
{{appointment.ProviderName}}
</ion-item>
<ion-row>
<ion-col width-50>
<button full ion-button color="secondary" (click)="confirmTrip($event)"> Confirm</button>
</ion-col>
<ion-col width-50>
<button full ion-button color="danger" (click)="cancelTrip($event)"> Cancel</button>
</ion-col>
</ion-row>
</ion-card-header>
//零件
cancelTrip(e){
// e.preventDefault(); // use this to prevent default event behavior
e.stopPropagation();
// code to cancel trip
}
confirmTrip(e){
// e.preventDefault(); // use this to prevent default event behavior
e.stopPropagation();
// code to confirm trip
}
