Question

我在home.css中做了两个类，分别是“ male”和“ female”。我做了两个单选按钮，其值分别为“ male”和“ female”。现在在我的段落中，我想在更改单选按钮的选择时更改段落的背景色。我想通过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;}

请在此示例中帮助我。当前，在广播上更改背景不会改变。

注意：我只想通过[ngClass]和单选按钮通过 2向绑定。

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

Answer 2

您还可以像这样简单地动态评估类：

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

尖括号表达式会将您的sexType变量评估为字符串，并将相应地更新其类。

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

2 个答案: