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

我循环浏览几个卡片元素以显示项目列表。每张卡内都有一个复选框,指示是否已选中该项目。

我的问题是,我无法将卡绑定到复选框状态,我希望能够在单击卡或单击复选框本身时调用相同的功能(复选框的种类仅可用作指示符,但所有同样,我需要将select事件附加到它)。

默认情况下,我没有


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


难道我做错了什么?当用户触摸卡本身或复选框时,我基本上只是在调用相同的功能。

最佳答案

首先,请注意,您需要将ion-checkbox包装在ion-item内,以便在单击旁边的标签时,该复选框也将更改其状态。

通过绑定clickion-card事件以仅更改复选框值,可以实现所需的结果:

(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

08-05 20:52
查看更多