离子角:单击卡片触发复选框

Question

我正在使用ionic3 -Angular4或Angular。

我有几个我循环的卡元素以显示项目列表。每张卡中的内部是一个复选框，以指示是否选择了该项目。

我的问题是，我无法将卡绑定到复选框状态，当我单击卡或单击复选框本身时，我希望能够调用相同的函数(复选框的某种只是指示器，但是我需要将选择事件附加到它(。

默认情况下我没有

(单击(=" 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-item的内部包装ion-checkbox，因此复选框在旁边的标签中单击时也会更改其状态。

您可以通过绑定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>

也请看一下此工作plunker 。

Answer 2

您应该添加另一个参数，即函数selectpack中的源(pack，source(。来源将确定哪个是单击，如果卡=> pack.selected =！pack.selected。

或仅编写另一个功能以进行卡片单击并更改pack.selected =！pack.selected。我希望它会在您的复选框上自动触发电离事件。

希望这个帮助。