Css 引导单选按钮颜色不会动态更改

我正在尝试更改按钮按下或单击事件时按钮的颜色。甚至边框颜色背景色也可以。但此代码段未应用所需的颜色。似乎该方法正在被调用，但颜色不适用

按钮-radioreactive.html

按钮-radioreactive.css

请查收

在HTML中，您只从“middle”单选按钮调用call（）方法。。。因此，您想要的效果仅适用于它

从'@angular/core'导入{Component，OnInit，Renderer2，ElementRef}；
从'@angular/forms'导入{FormBuilder，FormGroup}；
从“@angular/core/”导入{ViewChild}；
@组成部分({
选择器：“ngbd按钮放射性”，
templateUrl:“./buttons radioreactive.html”，
风格：[`
.按{
边框颜色：#ff9800；
颜色：橙色；
}
.未经压制{
边框颜色：#ffffff；
颜色：白色；
}
`]
})
导出类NgbdButtonsRadioreactive实现OnInit{
@ViewChild（'value1'）el:ElementRef；
公共放射组形式：FormGroup；
构造函数（私有formBuilder:formBuilder，私有呈现器：Renderer2）{}
恩戈尼尼特（）{
this.radioGroupForm=this.formBuilder.group({
“模型”：1
});
}
调用（）{
this.renderer.addClass（this.el.nativeElement，'pressed'）；
}
}

尝试使用ngClass：

在组件中：

<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
    <label ngbButtonLabel class="btn-primary">
          <input ngbButton type="radio" [value]="1" > Left (pre-checked)
        </label>
        <label #value1 ngbButtonLabel class="btn-primary"
        [ngClass]="{'pressed': toggle , 'un-pressed': !toggle}">
          <input ngbButton type="radio" value="middle"  (click)="call()"> Middle // consider to add click to input
        </label>
        <label ngbButtonLabel class="btn-primary">
          <input ngbButton type="radio" [value]="false"> Right
        </label>
      </div>
    <hr>
<pre>{{test}}</pre>

在html中：

.pressed {
  border-color: #ff9800 !important; // important
  color: orange !important;
}

.un-pressed {
  border-color: #ffffff !important;
  color: white !important;
}

---

您可以为按钮指定自定义类，请参见

样式：[`
.btn-custom.focus
{
大纲：无！重要；
框阴影：0
}
.btn海关{
背景颜色：橙色；
颜色：白色；
}
.btn-custom.active{
背景色：红色；
颜色：白色；
边框颜色：耐火砖；
}
`
左（预检查）
中间的
赖特

{{model}}

我只点击了中间按钮。它不适用there@Aniket：当你点击我上面粘贴的链接中的中间单选按钮时会发生什么…？？@AkberIqbal，我想他想创建一个自定义类来Buttons谢谢你，但问题实际上与ng botstrap有关。再次非常感谢你的延迟回复。非常感谢

    .pressed {
  border-color: #ff9800;
  color: orange;
}

.un-pressed {
  border-color: #ffffff;
  color: white;
}

toggle : boolean = true;
call(){
  this.toggle = !this.toggle;
}

<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
    <label ngbButtonLabel class="btn-primary">
          <input ngbButton type="radio" [value]="1" > Left (pre-checked)
        </label>
        <label #value1 ngbButtonLabel class="btn-primary"
        [ngClass]="{'pressed': toggle , 'un-pressed': !toggle}">
          <input ngbButton type="radio" value="middle"  (click)="call()"> Middle // consider to add click to input
        </label>
        <label ngbButtonLabel class="btn-primary">
          <input ngbButton type="radio" [value]="false"> Right
        </label>
      </div>
    <hr>
<pre>{{test}}</pre>

.pressed {
  border-color: #ff9800 !important; // important
  color: orange !important;
}

.un-pressed {
  border-color: #ffffff !important;
  color: white !important;
}

styles:[`
    .btn-custom.focus
    {
      outline:none!important;
      box-shadow:0 0 0 0
    }
    .btn-custom{
      background-color:orange;
      color:white;

    }
    .btn-custom.active{
      background-color:red;
      color:white;
      border-color:firebrick;
    }
  `
<div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
  <label ngbButtonLabel class="btn-custom">
    <input ngbButton type="radio" [value]="1"> Left (pre-checked)
  </label>
  <label ngbButtonLabel class="btn-custom">
    <input ngbButton type="radio" value="middle"> Middle
  </label>
  <label ngbButtonLabel class="btn-custom">
    <input ngbButton type="radio" [value]="false"> Right
  </label>
</div>
<hr>
<pre>{{model}}</pre>