使用单选按钮的双向绑定将类通过[ngClass]添加到段落

这是基于您的代码的工作示例

模板

<input type="radio" name="gender" value="male" [(ngModel)]="genderType">Male 
<input type="radio" name="gender" value="female" [(ngModel)]="genderType">Female 

<p [ngClass]="genderType">This is 3rd paragraph.</p>

风格

.male{background:green;}
.female{background:violet;}

成分

export class AppComponent {
  public genderType: string = 'male';
}

stackblitz example

您还可以简单地动态评估类,如下所示:

<input type="radio" name="gender" value="male" [(ngModel)]="genderType">Male 
<input type="radio" name="gender" value="female" [(ngModel)]="genderType">Female 

<p class="{{genderType}}">This is 3rd paragraph.</p>

尖括号表达式将以字符串形式计算genderType变量,并相应地更新其类。