Вход нажал, добавить класс Angular 8 - PullRequest
Новая
       7

Вход нажал, добавить класс Angular 8

2 голосов
/ 14 февраля 2020

У меня есть массив, который производит набор вопросов. Он отображает их как переключатели.

Вот логическое значение HTML 

          <div *ngSwitchCase="'radio'">
            <ul>
              <li
                *ngFor="let option of question.options"
                class="col-12 col-sm-6 p-0 purchase-type"
              >
                <input
                  class="form-control"
                  id="{{ option.id }}"
                  formControlName="{{ question.name }}"
                  value="{{ option.value }}"
                  type="radio"
                  (click)="clickEvent()" 
                  [ngClass]="status ? 'success' : 'danger'"
                />
                <label for="{{ option.id }}" class="btn btn-choice {{ option.class }}">
                  <span class="hidden-xs">{{ option.id }} </span
                  ><span class="hidden-xs"> (</span> {{ option.label
                  }}<span class="hidden-xs">)</span></label
                >
              </li>
            </ul>
          </div>

внутри .ts 

  status: boolean = false;
  clickEvent() {
    this.status = !this.status;
  }

Так как это в массиве, я Я изо всех сил пытаюсь переключить класс между каждым. В тот момент, когда я выбираю любую радио-кнопку, все элементы радио-кнопки применяют один и тот же класс.

Как бы я применил это только к переключателю?

Довольно плохо знаком с Angular. Ценю любую помощь или предложения.

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 14 февраля 2020

Если у вас есть переключатели, которые вы хотите стилизовать после переключения (выбраны), есть несколько способов сделать это. Один из способов был бы следующим:

Прослушивание formControl Value 

<input [formControlName]="radio" value="value" [ngClass]="form.controls.get('radio').value == 'value' ? 'active' : 'inactive'"></input>

Вы также можете сделать радиовход в компонент.

Компонент

Затем дайте ему обобщенную c ссылку на шаблон и проверьте, проверена ли она.

(Предупреждение: этот может быть немного сложнее, поскольку у вас есть передать formControlName и fromGroup вниз, либо как Inputs, либо реализуя controlValueAccessor) 

<input #radio [ngClass]="radio.checked ? 'active' : 'inactive'"></input>

Или вы также можете вызвать функцию в машинописи для ее разрешения.

Функция 

<input [formControlName]="radio" value="value" [ngClass]="checked(value) ? 'active' : 'inactive'"></input>

checked(value) {
    if(value == this.form.control['radio'].value) {
        return true
    } else {
        return false
    }

}

Я уверен, что есть и другие более аккуратные способы, но, надеюсь, вышесказанное полезно.

0 голосов
/ 14 февраля 2020

Может быть, это должно помочь вам 

<input
    class="form-control"
    id="{{ option.id }}"
    formControlName="{{ question.name }}"
    value="{{ option.value }}"
    type="radio"
    (click)="clickEvent($event)"  // add $event here
    [ngClass]="status ? 'success' : 'danger'"
/>

И в вашем компоненте рендеринга. Убедитесь, что вы проверили состояние по переменной состояния 

  constructor(private renderer: Renderer2) { }

  clickEvent(event: any) {
    this.status ? 
    this.render.addClass(event.target,"active") : 
    this.render.removeClass(event.target,"active"); // set your class here
  }
...