web-dev-qa-db-fra.com

Angular 2 Change Class On Condition

J'ai trois boutons dans une vue et lors du chargement de la page, j'affiche le contenu des premiers boutons. Une fois qu'un bouton est cliqué, le bouton devient actif mais lors du chargement de la page, le bouton initial n'est pas défini sur actif. Afin d'afficher le premier bouton actif, j'ai ajouté ceci au div:

[ngClass]="'active'"

Le problème avec ceci est maintenant quand un autre bouton est cliqué le premier bouton garde la classe active. J'évalue les données affichées en fonction d'une chaîne. En cliquant sur chaque bouton, la chaîne change. 

Comment puis-je ajouter une condition pour vérifier la chaîne actuelle? Donc, si la chaîne correspond aux données actuelles affichées, ajoutez la classe active à ce bouton?

Donc, quelque chose comme ceci est ce que je cherche:

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

Ceci est mon bouton actuel, mais la classe n'est pas ajoutée lorsque je l'ajoute dans cette syntaxe:

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

Pour être clair, la chaîne est définie par défaut sur "EQUIFAX" au chargement de la page.

Ceci est basé sur la réponse:

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

Vous pouvez ajouter une classe css basée sur la condition dans la directive NgClass elle-même:

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

Vous pouvez en savoir plus sur la directive NgClass et trouver des exemples ici .

17
Stefan Svrkota

Votre déclaration d'équivalence de [class.active]="shown == EQUIFAX" compare une variable nommée EQUIFAX.

Vous devriez plutôt modifier l'équivalence à comparer à la chaîne [class.active]="shown == 'EQUIFAX'"

Utiliser [ngClass] vous donnerait [ngClass]="{'active': shown == 'EQUIFAX'}

Voici un terrain de jeu avec ceci implémenté: http://plnkr.co/edit/j2w8aiQPghl0bPZznoF2?p=preview

3
silentsod

vous pouvez le faire:

[class.nameForYourClss]="myString == ThisIsActiveString ";
2
yanai edri

Si vous souhaitez par exemple ajouter plusieurs classes et avoir deux ou plusieurs conditions, vous pouvez ajouter chaque classe et condition après la virgule ,.

Par exemple

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