Question

我有一张带两个按钮的卡片。点击卡片本身应打开详细信息页面：

<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>

单击按钮应触发单独的操作。现在，单击按钮可显示详细信息页面和这些特定操作。是否有任何机制可以将卡片的其他部分与按钮分开？

Answer 1

我认为您必须使用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
}

Ionic 2处理元素

1 个答案: