clr复选框具有不同颜色的动态复选框集AngularJs

我正在遵循，需要在选中复选框时使用不同的颜色

代码HTML:

<div class="form-group">
  <label>With a list of objects</label>
  <clr-checkbox *ngFor="let item of items$"
                    [(clrChecked)]="item.running"
                    [clrDisabled]="item.disabled">
                    {{ item.name }}
                </clr-checkbox>

</div>

---

您可以通过CSS中的

currentColor

关键字和对默认清晰度复选框模板的轻微更改来实现这一点。模板如下所示：

<clr-checkbox *ngFor="let item of items$" [style.color]="item.color" [(clrChecked)]="item.running" [clrDisabled]="item.disabled">
        <span class="checkbox-label">{{ item.name }}</span>
</clr-checkbox>

您可以看到，我在

clr复选框的color属性上使用了样式绑定。因此，选中复选框的颜色将通过
currentColor
继承该颜色

顺便说一句，如果在全局样式文件中添加上述CSS片段而不是组件样式，则不需要该
：：ng deep

以下是工作示例：

您好，@Kapil clearity ui没有复选框的颜色属性，所以如果您想显示复选框，您需要使用css。
<clr-checkbox *ngFor="let item of items$" [style.color]="item.color" [(clrChecked)]="item.running" [clrDisabled]="item.disabled">
        <span class="checkbox-label">{{ item.name }}</span>
</clr-checkbox>

.checkbox-label {
   color: #000;
}

clr-checkbox ::ng-deep input[type=checkbox]:checked+label::before {
   background-color: currentColor;
}