javascript - 使用单选按钮的 2-Way 绑定通过 [ngClass] 将类添加到段落

Question

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

主页.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>

主页.ts

genderType: string = "male";

主页.css

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

请在这个例子中帮助我。目前，在广播更改中，背景没有改变。

注意：我只想通过 2 向绑定使用 [ngClass] 和单选按钮来实现这一点。

标签： javascriptangulartwo-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';
}

堆栈闪电战示例