html - ngFor 循环中状态为 'checked' 的 ngStyle

Question

我有一个复选框列表，这些复选框分配给不同的部门(每个部门都有自己的颜色)当复选框未选中时只有边框是部门的颜色当选中的背景更改为分配颜色时

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

与 Angular 无关。您无法原生更改复选框的背景颜色您应该使用带有伪元素的自定义类 :before 和 :after 来更改复选框和单选按钮的外观

你有一个例子here