javascript - ionic Angular : Triggering checkbox from card click

Question

我正在使用 ionic3 - angular4 或只是 angular。

我循环显示多个卡片元素以显示项目列表。每张卡片内都有一个复选框，用于指示该项目是否被选中。

我的问题是，我无法将卡片绑定(bind)到复选框状态，我希望在单击卡片或单击复选框本身时能够调用相同的函数(复选框有点像指示器，但我仍然需要将选择事件附加到它)。

默认情况下我没有

(click)="selectPack(pack)"

当我将它附加到卡片内容时，该函数被调用，但复选框状态没有改变。

<ion-card color="light" *ngFor="let pack of tmpPackages" icon-left>
<ion-card-content style="float:left;width:100%" (click)="selectPack(pack)">
    <ion-checkbox style="width:35px" color="dark" (ionChange)="selectPack(pack)" [(ngModel)]="pack.selected">
    </ion-checkbox>
    {{pack.label}}  
</ion-card-content>
</ion-card>

我做错了什么吗？当用户触摸卡片本身或复选框时，我基本上只是调用相同的函数。

Answer 1

首先，请注意您需要将 ion-checkbox 包裹在 ion-item 中，这样在接下来单击标签时复选框也会更改其状态

您可以通过绑定(bind) ion-card 的 click 事件来实现您正在寻找的内容，以仅更改复选框值:

(click)="pack.selected = !pack.selected"

然后使用复选框的 ionChange 事件调用您的方法:

(ionChange)="select(pack)"

这样，如果您单击卡片或复选框，您的方法将被调用(如果您单击卡片，它将更改复选框，然后该更改将调用您的方法)。

这将是最终结果:

<ion-card color="light" *ngFor="let pack of tmpPackages" icon-left>
  <ion-card-content style="float:left;width:100%" (click)="pack.selected = !pack.selected">

      <ion-item style="background: transparent;">
        <ion-label>{{pack.label}} </ion-label>
        <ion-checkbox color="dark" (ionChange)="select(pack)" [(ngModel)]="pack.selected"></ion-checkbox>
      </ion-item>

  </ion-card-content>
</ion-card>

另请查看 this working plunker .