Радиокнопка углового ngbootstrap динамически не меняется - PullRequest
Новая
       7

Радиокнопка углового ngbootstrap динамически не меняется

0 голосов
/ 14 января 2019

Я пытаюсь изменить цвет кнопки на нажатой кнопке или события клика. Даже цвет фона границы также подойдет. Но этот фрагмент кода не применяет требуемые цвета. Кажется, метод вызывается, но цвета не применяются.

Кнопка-radioreactive.html 

<code><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']}}

кнопка-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")
      }
    }

кнопка-radioreactive.css 

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

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

Ответы [ 3 ]

0 голосов
/ 14 января 2019

попробуйте использовать ngClass:

в компоненте: 

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

в html: 

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

CSS: 

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

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

DEMO

0 голосов
/ 14 января 2019

вы можете назначить пользовательский класс своим кнопкам, см. stackblitz 

<code>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}}
0 голосов
/ 14 января 2019

Пожалуйста, проверьте это

В вашем HTML вы вызываете метод 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');
  }
}
...