Mudança De Classe Angular 2 Nas Condições
tenho três botões numa vista e na carga de páginas estou a mostrar o conteúdo dos primeiros botões. Uma vez que um botão é clicado, o botão torna-se ativo, mas na página carregar o botão inicial não é configurado como ativo. Para mostrar o primeiro botão activo, adicionei isto ao div:
[ngClass]="'active'"
o problema com isso é agora quando outro botão é clicado o primeiro botão mantém a classe ativa. Estou a avaliar os dados que estão a ser apresentados com base numa string. Ao clicar em cada botão, o texto muda.
Como posso adicionar uma condição para verificar o texto actual? Então, se o texto corresponder aos dados actuais que estão a ser apresentados, então adicione a classe activa a este botão?
Então algo assim é o que eu procuro:[ngClass]="'active'" if "myString == ThisIsActiveString;
Este é o meu botão actual, mas a classe não é adicionada quando a adiciono nesta sintaxe:
<button [class.active]="shown == EQUIFAX" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>
para ser claro, o texto está em falta para "EQUIFAX" na carga da página.
isto baseia-se na resposta:
<button [ngClass]="'active' : shown == 'EQUIFAX'" (click)="shown = 'EQUIFAX'" type="button" id="equifax" class="btn btn-secondary">Equifax Report </button>
3 answers
Pode adicionar classe css com base na condição da própria directiva:
[ngClass]="{ 'active': myString == ThisIsActiveString }";
Pode ler mais sobre a Directiva NgClass e encontrar exemplos aqui.
A sua declaração de equivalência de [class.active]="shown == EQUIFAX" está a comparar mostrado com uma variável chamada EQUIFAX.
Você deve, em vez disso, alterar a equivalência para comparar com a cadeia de caracteres [class.active]="shown == 'EQUIFAX'"
Se usares [ngClass] dar-te-ias [ngClass]="{'active': shown == 'EQUIFAX'}
Podes fazer isso:
[class.nameForYourClss]="myString == ThisIsActiveString ";