Вопрос:

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

html angular angular-ng-class

8167 просмотра

6 ответа

460 Репутация автора

Я хочу добавить цвет фона к элементу 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');
}
Автор: Bhaskararao Gummidi Источник Размещён: 03.01.2018 05:40

Ответы (6)


2 плюса

26310 Репутация автора

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

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

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

Автор: Aravind Размещён: 03.01.2018 05:41

0 плюса

744 Репутация автора

Используйте 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 };
  }
Автор: Ashraful Islam Размещён: 03.01.2018 06:22

0 плюса

2093 Репутация автора

Удалите класс «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');
}

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

Автор: Ajay Размещён: 03.01.2018 07:08

0 плюса

460 Репутация автора

Я просто взял переменную и присвоил ей имя категории, когда щелкнул по категории 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;
}
Автор: Bhaskararao Gummidi Размещён: 03.01.2018 07:19

0 плюса

66 Репутация автора

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

Автор: lakshman_dev Размещён: 22.05.2019 02:08

0 плюса

57 Репутация автора

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

На элементе:

На компонент.тс

@ViewChild ('element') element: ElementRef;

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

this.element.nativeElement.classList.add ( "NewClass"); this.element.nativeElement.classList.remove ( "NewClass");

Автор: Sebastian Mansfield Размещён: 07.08.2019 04:39
Вопросы из категории :
32x32