Добавить и удалить класс в Angular

Question

Я хочу добавить цвет фона к элементу li при нажатии, но когда я щелкнул по другому элементу li, предыдущий цвет фона элемента li остается неизменным.

component.html

<div class="col-md-3 categories">
  <h3>News By Type</h3>
  <ul>
    <li class="cat" id="cat_{{i}}" *ngFor="let category of categories; let i = index" (click)="sortNewsItems($event,category,i)"><img src="../assets/images/news.jpg" width="70"><h4>{{category}}</h4></li>
  </ul>
</div>

component.ts

sortNewsItems(event,cat,index) {
  event.target.classList.add('cat_active');
}

Answer 1

Вы должны использовать srcElement из $event

sortNewsItems(event,cat,index) {
  event.srcElement.classList.add('cat_active');
}

Прочитайте этот ответ и используйте его демо

Answer 2

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

По элементу:

На component.ts

@ViewChild('element') элемент: ElementRef;

тогда вы можете просто добавить классы или удалить их с помощью

this.element.nativeElement.classList.add("новый класс"); this.element.nativeElement.classList.remove("новый класс");

Answer 3

Удалите класс "cat_active" из всех родственных элементов перед добавлением нового класса "cat_active" к выбранному элементу.

component.html

<li #li class="cat" *ngFor="let category of categories;" (click)="sortNewsItems($event)">

component.ts

@ViewChildren('li') livs: QueryList<any>;

constructor(private elementRef: ElementRef) { }

sortNewsItems(event) {
    this.livs.forEach(liv => liv.nativeElement.children[0].classList = []);
    event.target.classList.add('cat_active');
}

Я надеюсь, что это может помочь.

Answer 4

      document.querySelector(".menu-open-btn a").onclick = function addNewClass() {
    document.querySelector(".mobile-header").classList.add("newClass");
}

Answer 5

Я просто взял переменную и присвоил ей имя категории, когда щелкнул по категории li, и добавил активный класс на основе приведенного ниже условия. наконец я установил это как то, что я хочу. Спасибо всем за поддержку.

component.html

<li class="cat" *ngFor="let category of categories; let i = index" (click)="sortNewsItems(category,i)" [ngClass]="{'cat_active':toggleClass === category}"><img src="../assets/images/news.jpg" width="70"><h4>{{category}}</h4></li>

component.ts

toggleClass:string;

sortNewsItems(cat,index) {
  this.toggleClass = cat;
}

Answer 6

      <any-element [ngClass]="{selected: isSelected}">
...
</any-element>

ИЛИ ЖЕ

      <any-element [ngClass]="{selected: isSelected, disabled: isDisabled}">
...
</any-element>

Answer 7

Я прочитал, что использование srcElement - не очень хорошая практика. Лучше использовать renderer2.

Answer 8

Используйте ngStyle вместо прямой привязки класса в элементе html.

component.html

<div class="col-md-3 categories">
  <h3>News By Type</h3>
  <ul>
    <li [ngStyle]="setListItemStyle(category)" class="cat" id="cat_{{i}}" *ngFor="let category of categories; let i = index" (click)="sortNewsItems($event,category,i)"><img src="../assets/images/news.jpg" width="70"><h4>{{category.label}}</h4></li>
  </ul>
</div>

component.ts

  activeListItem: any = null;
  categories: any[] = [{ id: 1, label: 'Test label 1' }, { id: 2, label: 'Test label 2' }];

  sortNewsItems(event, category, i) {
    event.stopPropagation();
    this.activeListItem = category;
  }

  setListItemStyle(category) {
    return { 'background-color': this.activeListItem && this.activeListItem.id == category.id ? '#fff000' : null };
  }