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

Question

我有一个复选框列表，这些复选框与不同的部门（每个部门都有自己的颜色）一致，当取消选中框时，当选中的背景变为asign颜色时，只有边框采用部门颜色

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>

Answer 1

与角度无关。 您无法原生地更改复选框的背景颜色 你应该使用带有伪元素的自定义类：在更改复选框和单选按钮的外观之前和之后

您有一个示例here

Answer 2

好吧，我找到了一个没有使用的解决方案：before或：之后接缝更像是一个麻烦（如果有人在寻找替代解决方案）：

 <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'
}

}