Angular ptriStateCheckbox for each Select 更改不同的 colored颜色

发布于04月24日

我的组件的css类是空的.我有一个复选框，其值为:V、X和Empty.我希望更改 colored颜色如下:V-绿色、X-红色和空-默认复选框.

export class EditComponent implements OnInit, AfterViewInit, OnDestroy {
  public modelForm: FormGroup;

constructor(private fb: FormBuilder){}

ngOnInit() {
 this.creationFormulaire();
}

private creationFormulaire() {
    this.modelForm = this.fb.group({
    liste20: new FormControl(null),
 });

}
}

export interface EditDTO{
  liste20: boolean;
}

 <div class="col-9">
          <p-triStateCheckbox formControlName="liste20"></p-triStateCheckbox>
        </div>
      </div>

推荐答案

有很多种方法，你可以通过传递表单控件的值或使用ngClass来创建3个带有你想要为复选框显示的 colored颜色的类.

import { FormControl } from '@angular/forms';

liste20 = new FormControl();

HTML

<div class="col-9">
 <p-triStateCheckbox formControlName="liste20" class="{{ liste20.value }}"></p-triStateCheckbox>
</div>

政务司司长

:host >>> .V::before{
  background-color: green !important;
}

:host >>> .X-close::before{
  background-color: red !important;
}

:host >>> .empty-close::before{
  background-color: gray !important;
}