Javascript 使用什么css属性在angular中设置选中单选按钮的样式？

我在angular 4.1.3应用程序中有一个单选按钮组：

<form #f="ngForm">
  <label class="btn btn-success">
    <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
  </label>
  <label class="btn btn-success">
   <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
  </label>
  <label class="btn btn-success">
   <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
  </label>
</form>

那不行。。。

---

你知道如何在CSS中选择选中按钮吗？

不幸的是，你不能使用child

：checked

伪选择器设置父对象的样式。 要实现这一点，我建议使用模型值，例如：

<form #f="ngForm">
  <label class="btn btn-success" [ngClass]="{selected: myFood==='beef'">
    <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
  </label>
  <label class="btn btn-success" [ngClass]="{selected: myFood==='lamb'">
   <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
  </label>
  <label class="btn btn-success" [ngClass]="{selected: myFood==='fish'">
   <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
  </label>
</form>

牛肉
羔羊
鱼

：选中的

选择器适用于角度应用程序的CSS。

输入[type=“radio”]：选中的

是正确的选择器。你想对它做些什么？如果要设置所选单选按钮标签的样式，请执行以下操作：

：checked+label

使用此选择器时不会发生任何事情。当我检查相应的按钮时，我应该能够看到选中的属性？它不在那里

<form #f="ngForm">
  <label class="btn btn-success" [ngClass]="{selected: myFood==='beef'">
    <input type="radio" value="beef" name="food" [(ngModel)]="myFood"> Beef
  </label>
  <label class="btn btn-success" [ngClass]="{selected: myFood==='lamb'">
   <input type="radio" value="lamb" name="food" [(ngModel)]="myFood"> Lamb
  </label>
  <label class="btn btn-success" [ngClass]="{selected: myFood==='fish'">
   <input type="radio" value="fish" name="food" [(ngModel)]="myFood"> Fish
  </label>
</form>