angular ngbootstrap 单选按钮颜色不会动态变化

Question

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

buttons-radioreactive.html

<form [formGroup]="radioGroupForm">
      <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="model">
        <label ngbButtonLabel class="btn-primary">
          <input ngbButton type="radio" [value]="1" > Left (pre-checked)
        </label>
        <label #value1 ngbButtonLabel class="btn-primary" (click)="call()">
          <input ngbButton type="radio" value="middle"> Middle
        </label>
        <label ngbButtonLabel class="btn-primary">
          <input ngbButton type="radio" [value]="false"> Right
        </label>
      </div>
    </form>
    <hr>
    <pre>{{radioGroupForm.value['model']}}</pre>

buttons-radioreactive.ts

    import { Component, OnInit } from '@angular/core';
    import { FormBuilder, FormGroup } from '@angular/forms';
    import {ElementRef} from '@angular/core';
    import { ViewChild } from '@angular/core/';


    @Component({
      selector: 'ngbd-buttons-radioreactive',
      templateUrl: './buttons-radioreactive.html',
      styleUrls: ['./buttons-radioreactive.css']
    })
    export class NgbdButtonsRadioreactive implements OnInit {
    @ViewChild('value1')el:ElementRef;

      public radioGroupForm: FormGroup;

      constructor(private formBuilder: FormBuilder) {}

      ngOnInit() {
        this.radioGroupForm = this.formBuilder.group({
          'model': 1
        });
      }

      call(){
        console.log("Called before")
        this.el.nativeElement.color="orange";
        console.log("Called after")
      }
    }

buttons-radioreactive.css

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

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

Answer 1

请检查this

在您的 HTML 中，您仅从 'middle' 单选按钮调用 call() 方法...因此您想要的效果仅适用于它。

import {  Component,  OnInit,  Renderer2 ,ElementRef} from '@angular/core';
import {  FormBuilder,  FormGroup} from '@angular/forms';
import {  ViewChild} from '@angular/core/';

@Component({
  selector: 'ngbd-buttons-radioreactive',
  templateUrl: './buttons-radioreactive.html',
  styles: [`
          .pressed {
  border-color: #ff9800;
  color: orange;
}

.un-pressed {
  border-color: #ffffff;
  color: white;
}
`]
})
export class NgbdButtonsRadioreactive implements OnInit {
  @ViewChild('value1') el: ElementRef;

  public radioGroupForm: FormGroup;

  constructor(private formBuilder: FormBuilder, private renderer: Renderer2) {}

  ngOnInit() {
    this.radioGroupForm = this.formBuilder.group({
      'model': 1
    });
  }

  call() {
    this.renderer.addClass(this.el.nativeElement, 'pressed');
  }
}

Answer 2

尝试使用 ngClass :

在组件中：

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

在html中：

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

css:

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

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

DEMO

Answer 3

您可以将自定义 class 分配给您的按钮，请参阅 stackblitz

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>

angular ngbootstrap 单选按钮颜色不会动态变化

angular ngbootstrap radio button color is not changing dynamically

css

ng-bootstrap

angular