Angular: Условный класс с использованием *ngClass

Одна из общих проблем, с которой могут столкнуться начинающие разработчики при использовании Angular, связана с использованием *ngClass для применения условных классов к элементам. Вот типичный пример того, как может выглядеть код:

<ul>
  <li *ngClass="{active: currentItem==='item1'}" (click)="currentItem='item1'">Item1</li>
  <li *ngClass="{active: currentItem==='item2'}" (click)="currentItem='item2'">Item2</li>
  <li *ngClass="{active: currentItem==='item3'}" (click)="currentItem='item3'">Item3</li>
</ul>

Здесь мы пытаемся применить класс active к элементам списка в зависимости от текущего выбранного элемента. Однако, при выполнении этого кода мы столкнёмся с ошибкой: «Cannot read property ‘remove’ of undefined at BrowserDomAdapter.removeClass».

Эта ошибка происходит потому, что Angular пытается удалить класс с элемента, который ещё не был инициализирован. В результате, метод removeClass вызывается на undefined, что приводит к данной ошибке.

Чтобы избежать этой ошибки, необходимо убедиться, что элемент, с которым мы работаем, был инициализирован. Для этого можно использовать директиву *ngIf для проверки условий перед применением класса. Вот как это можно сделать:

<ul>
  <li *ngIf="currentItem" *ngClass="{active: currentItem==='item1'}" (click)="currentItem='item1'">Item1</li>
  <li *ngIf="currentItem" *ngClass="{active: currentItem==='item2'}" (click)="currentItem='item2'">Item2</li>
  <li *ngIf="currentItem" *ngClass="{active: currentItem==='item3'}" (click)="currentItem='item3'">Item3</li>
</ul>

Теперь, прежде чем применять класс к элементу, Angular проверит, был ли инициализирован currentItem. Это предотвратит ошибку и позволит корректно применять классы к элементам.