Как добавить свойство класса css на основе свойства Components

Question

У меня есть список bootstrap, где я показываю список Dashboards. По умолчанию один из Dashboard, который начинается с какого-то имени, должен быть выбран по умолчанию, добавив класс css к существующему атрибуту класса, как показано ниже.

<a *ngFor="let user of userModel" class="list-group-item list-group-item-action active">{{user.dashBoardName}}</a>

активный класс атрибута class тега должен быть добавленным, только если dashBoardName - любая другая строка, она должна быть такой, как показано ниже

<a *ngFor="let user of userModel" class="list-group-item list-group-item-action">{{user.dashBoardName}}</a>

Как мы можем сделать это, используя Angular. Между прочим, я новичок в этом Angular.

Answer 1

Вы можете просто использовать директиву [class.xxx] с вашим active именем класса, как показано ниже:

<a *ngFor="let user of userModel" [class.active]="user.dashBoardName === 'activeDashboard'" class="list-group-item list-group-item-action">{{user.dashBoardName}}</a>

Эта директива добавит active имя класса, если условие true.

Вы также можете переместить ваши логи c в метод вашего компонента, чтобы сохранить ваш шаблон простым:

в component.ts:

isActive(user: User) {
  return user.dashBoardName === 'activeDashboard';
}

в шаблоне. html:

<a *ngFor="let user of userModel" [class.active]="isActive(user)" class="list-group-item list-group-item-action">

Answer 2

Использование ngClass директива

<a *ngFor="let user of userModel" class="list-group-item list-group-item-action" [ngClass]="user.dashBoardName === 'activeUser' ? 'active' : ''">{{user.dashBoardName}}</a>

Здесь я проверяю константный литерал 'activeUser'. Вы также можете заменить его переменной, определенной в контроллере. Затем используйте имя переменной без одинарных кавычек.