Ionic Angular：从卡片点击触发复选框答案

【问题标题】：Ionic Angular : Triggering checkbox from card clickIonic Angular：从卡片点击触发复选框
【发布时间】：2017-11-02 03:39:55
【问题描述】：

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

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

我的问题是，我无法将卡片绑定到复选框状态，我希望能够在单击卡片或单击复选框本身时调用相同的函数（复选框仅用作指示器，但同样我需要将选择事件附加到它）。

默认情况下我没有

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

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

【问题讨论】：

你能给我们一个背后的代码示例吗？
你设置pack.selected=true; ?

标签： javascript angular typescript ionic2 ionic3

【解决方案1】：

首先，请注意您需要将ion-checkbox 包裹在ion-item 中，这样复选框在单击旁边的标签时也会改变其状态。

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

【讨论】：

嗨，这很好用。我有一些小问题，但是，它“肥大”了卡..这可能是由离子项目引起的，即使背景是透明的，预感是，该元素仍在消耗空间
没关系，不管它是否在离子物品中，它都有效，而且它不是让它变胖的物品，它是离子标签，将其标记为答案
很高兴听到它起作用了 :) 我们仍然可以使用 css 来调整布局以适应您的最终需求...

【解决方案2】：

您应该在函数 selectPack(pack, source) 中添加另一个参数，即 source。来源将确定哪个是点击，如果 card => pack.selected = !pack.selected.

或者只是为卡片点击编写另一个函数并更改 pack.selected = !pack.selected。我希望它会自动触发您复选框上的 ionChange 事件。

希望对您有所帮助。

【讨论】：