javascript - 使用单选按钮的 2 向绑定(bind)通过 [ngClass] 添加类到段落

Question

我在 home.css 中创建了 2 个类，名称分别为“男性”和“女性”。我制作了 2 个单选按钮，其值为“男性”和“女性”。现在在我的段落中，我想在更改单选按钮的选择时更改段落的背景颜色。我想通过 Angular 4 中的 [ngClass] 实现这一点。

home.html

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

home.ts

genderType: string = "male";

home.css

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

请帮我解决这个例子。目前，radio change 的背景没有改变。

Note: I want to achieve this only with [ngClass] and Radio-buttons via 2-way binding.

Answer 1

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

模板

<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