Добавить активный класс к выбранным элементам угловых (возможно, несколько активных элементов) - PullRequest
Новая
       7

Добавить активный класс к выбранным элементам угловых (возможно, несколько активных элементов)

0 голосов
/ 28 августа 2018

У меня есть группа кнопок. Когда я нажимаю одну из этих кнопок, я хочу, чтобы класс был активным для этой кнопки. Когда я нажимаю кнопку «Далее», я также хочу, чтобы класс был активным для этой кнопки (и я не хочу удалять активный класс из предыдущей кнопки). Поэтому я хочу иметь несколько активных кнопок (если они выбраны), и когда я нажимаю на выбранную кнопку, я хочу удалить активный класс (переключатель). Как я могу это сделать?

Если я сделаю что-то вроде ниже, у меня выбрана только одна кнопка. Как я могу выбрать более одной кнопки? 

<div class="btn-group">
  <div class="btn btn-outline-secondary" *ngFor="let test of tests" (click)="select(test)" [ngClass]="{active: isActive(test)}"
  >
    <input type="radio" name="" autocomplete="off" value="">
     {{test}}
  </div>
</div>

ц. файл

import {Component, ViewEncapsulation} из '@ angular / core'; 

@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['.test.scss'],
})

export class Test {

  tests: any[];


  constructor() {
    this.tests = ['test1', 'test2', 'test3']

  }

  ngOnInit() {

  }

  select(item) {
    this.selected = item;
  };
  isActive(item) {
      return this.selected === item;
  };
}

1 Ответ

0 голосов
/ 28 августа 2018

Сохраните свойство для каждого тестового объекта, указывая, выбран ли он или нет. 

@Component({
  selector: 'test',
  templateUrl: './test.html',
  styleUrls: ['.test.scss'],
})

export class Test {

  tests: any[];


  constructor() {
    this.tests = ['test1', 'test2', 'test3']

  }

  ngOnInit() {

  }

  select(item) {
    item.selected = !item.selected;
  };
  isActive(item) {
      return item.selected;
  };
}
...