在 ngFor 循环中具有“已检查”状态的 ngStyle答案

【问题标题】：ngStyle with 'checked' state in ngFor loop在 ngFor 循环中具有“已检查”状态的 ngStyle
【发布时间】：2018-05-22 15:10:45
【问题描述】：

我有一个复选框列表，它是不同部门的复选框（每个部门都有自己的颜色）当框未被选中时，只有边框是在部门的颜色时被选中的Backgroud更改为Asigh颜色

box-shadow 可以正常工作，但不能改变背景（保持蓝色），这是我目前的代码：

  <label class="custom-control custom-checkbox" *ngFor="let department of departments">
        <input type="checkbox" class="custom-control-input" [ngStyle]="{'background-color':checked===true? department.color:'white'}">
        <span class="custom-control-indicator" [ngStyle]="{'box-shadow': '0 0 1px 1px' + department.color}" >  </span>
        <span class="custom-control-description text-capitalize">{{department.id}}</span>
      </label>

【问题讨论】：

标签： html css angular bootstrap-4

【解决方案1】：

好吧，我找到了一个不使用 :before 或 :after 的解决方案，接缝就像一个更少的麻烦（以防有人在寻找替代解决方案）：

 <label class="custom-control custom-checkbox" *ngFor="let department of departments">
        <input type="checkbox" class="custom-control-input" (click)=gotChecked($event,customBox,department.color)>

        <span class="custom-control-indicator" [ngStyle]="{'box-shadow': '0 0 1px 1px' + department.color}" >  </span>
        <span class="custom-control-indicator" #customBox></span>
        <span class="custom-control-description text-capitalize">{{department.id}}</span>
      </label>

和：

gotChecked($event: Event, customBox: HTMLSpanElement, color: string) {
let isChecked = (<HTMLInputElement>event.target).checked
console.log(isChecked)
if (isChecked) {
  customBox.style.backgroundColor = color
} else {
  customBox.style.backgroundColor = 'transparent'
}

}

【讨论】：

【解决方案2】：

它与角度无关。您不能本机更改复选框的背景颜色您应该使用带有伪元素的自定义类 :before 和 :after 来更改复选框和单选按钮的外观

你有一个例子here

【讨论】：