У меня есть три кнопки в представлении и на загрузке страницы. Я показываю первый контент кнопок. После нажатия кнопки кнопка становится активной, но при загрузке страницы начальная кнопка не установлена в активную. Чтобы показать первую активную кнопку, я добавил ее в 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>