Angular 2 Изменить класс при условии

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

[ngClass]="'active'"

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

Как добавить условие для проверки текущей строки? Итак, если строка соответствует текущим отображаемым данным, добавьте активный класс к этой кнопке?

Итак, что-то вроде этого - то, что я ищу:

[ngClass]="'active'" if "myString == ThisIsActiveString;

Это моя текущая кнопка, но класс не добавляется, когда я добавляю ее в этот синтаксис:

 <button  [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

Чтобы очистить строку, по умолчанию используется значение "EQUIFAX" при загрузке страницы.

Это основано на ответе:

 <button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>

Ответ 1

Вы можете добавить класс css на основании условия в самой директиве NgClass:

[ngClass]="{ 'active': myString == ThisIsActiveString }";

Подробнее о директиве NgClass вы можете узнать и найти примеры здесь.

Ответ 2

Обозначение эквивалентности [class.active]="shown == EQUIFAX" сравнивается с переменной с именем EQUIFAX.

Вместо этого вы должны изменить эквивалентность для сравнения со строкой [class.active]="shown == 'EQUIFAX'"

Используя [ngClass], вы получите [ngClass]="{'active': shown == 'EQUIFAX'}

Здесь игровая площадка с этим реализована: http://plnkr.co/edit/j2w8aiQPghl0bPZznoF2?p=preview

Ответ 3

вы можете сделать это:

[class.nameForYourClss]="myString == ThisIsActiveString ";

Ответ 4

Например, если вы хотите добавить много классов и иметь два или более условий, каждый класс и условие можно добавить после запятой ,.

Например,

[ngClass]="{'first-class': condition,
            'second-class': !condition}"

Ответ 5

В HTML:

<div [style.color]="navColor"></div>

В TS:

Объявление:

navColor: "white";

Изменение в зависимости от условия:

this.navColor = "black";