将类动态添加到Angular中的复选框字段答案

【问题标题】：Add Class dynamically to checkbox field in Angular将类动态添加到Angular中的复选框字段
【发布时间】：2020-11-02 15:30:46
【问题描述】：

我是 Angular 的初学者，我只是想实现我有一个复选框，我想根据它的值设置一个类，即如果选中则将 css 类设置为活动，如果未选中则将类设置为非活动 HTML

 <div class="field">
                    <div class="center">
                        <mat-checkbox formControlName="isDeployed">Is Deployed</mat-checkbox>
                    </div>
                </div>

constructor(public formBuilder: FormBuilder, public dialogRef: MatDialogRef<EditComponent>, 
@Inject(MAT_DIALOG_DATA) public data, 
private _snackBar: MatSnackBar, public dialog: MatDialog,) { 

  this.editForm = this.formBuilder.group({
  id: [{value: '', disabled: true}, Validators.required],
  isDeployed: [{value: false, disabled: true}, null],
});
}

我从 data.isDeployed 中获得了复选框值，如果相应地在 html 元素上设置了真正的类，我需要做什么。

    .active{
    color:purple;
           }
    .inactive{
     color:grey;
        }

【问题讨论】：

标签： html css angular asp.net-core

【解决方案1】：

您可以尝试将ngClass 绑定与三元运算符一起使用

试试下面的

<mat-checkbox [ngClass]="editForm.value.isDeployed ? 'active' : 'inactive'" formControlName="isDeployed">
  Is Deployed
</mat-checkbox>

【讨论】：

【解决方案2】：

你可以使用

<section [ngClass]="value ? 'active' : 'inactive'"></section>

如果值为 true .active 类集，如果值为 false .inactive 类集

【讨论】：