离子复选框：选中不工作角度2离子2

Question

我想在选中ion-checkbox时执行css。但是离子复选框：已选中并未执行。

我想突出显示它下面的所有列。

这就是我所做的。

** Html文件

<ion-row class = "DefaultBundle">
    <ion-col col-4>Description of Services</ion-col>
    <ion-item col-4 style = "background-color: #84AEF9 !important;">
        <ion-label class = "Services">Full Service Agency</ion-label>
        <ion-checkbox class = "Bundle1"></ion-checkbox> // <-- Here's the check box
    </ion-item>
    <ion-item col-4 [hidden] = "!DefaultBundle.checked" style = "background-color: #84AEF9 !important;">
        <ion-label class = "Services">Frost & Co Lite</ion-label>
        <ion-checkbox class = "Bundle2"></ion-checkbox>
    </ion-item>
</ion-row>

以下是我想要突出显示的一些字段。

<ion-row>
    <ion-col>Market Appraisal</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>
<ion-row>
    <ion-col>For Sale Board</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>
<ion-row>
    <ion-col>Rightmove Portal Listing</ion-col>
    <ion-col><ion-checkbox disabled checked></ion-checkbox></ion-col>
    <ion-col [hidden] = "!DefaultBundle.checked"><ion-checkbox disabled checked></ion-checkbox></ion-col>
</ion-row>

这是我的CSS。

.Bundle1:checked
{
    background-color: red; // <-- this is just for testing. And it never executes.
}

问题：我在这里缺少什么？

Answer 1

您假设ion-checkbox类似于input或checkbox/radio类型的简单option。

：选中docs

  

：checked CSS伪类选择器表示选中或切换为打开状态的任何radio（），checkbox（）或选项（在a中）元素。

如果您浏览ion-checkbox组件代码，

'<div class="checkbox-icon" [class.checkbox-checked]="_value">' +
      '<div class="checkbox-inner"></div>' +
    '</div>' +
    '<button role="checkbox" ' +
            'type="button" ' +
            'ion-button="item-cover" ' +
            '[id]="id" ' +
            '[attr.aria-checked]="_value" ' +
            '[attr.aria-labelledby]="_labelId" ' +
            '[attr.aria-disabled]="_disabled" ' +
            'class="item-cover"> ' +
    '</button>',

显示时是按钮。

您需要创建自定义类

  .isChecked{
     background-color: red;
  }

并根据布尔值动态地使用[class]设置它。

 <ion-checkbox [class.isChecked] = "isCurrentCheckboxChecked"></ion-checkbox>