Angulaire 2 Change Class Sur Condition

J'ai trois boutons dans la vue et au chargement de la page je suis de l'affichage de la première boutons de contenu. Une fois qu'un bouton est cliqué sur le bouton devient actif, mais au chargement de la page initiale bouton n'est pas activé. Afin de montrer le premier bouton active j'ai ajouté ceci à la div:

[ngClass]="'active'"

Le problème avec ceci est que maintenant, quand un autre bouton est cliqué sur le premier bouton de la garde de la classe active. Je suis d'évaluer les données en cours de spectacle basé sur une chaîne de caractères. Cliquez sur chaque bouton de la chaîne de modifications.

Comment puis-je ajouter une condition à vérifier pour l'actuelle chaîne de caractères? Donc, si la chaîne correspond à l'actuel, les données montrent ensuite ajouter la classe active à ce bouton?

Donc quelque chose comme ceci est ce que je recherche:

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

C'est mon bouton, mais la classe n'est pas ajouté 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 de la chaîne de la valeur par défaut est "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>

source d'informationauteur wuno

  1. 16

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

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

    Vous pouvez en lire plus à propos de NgClass directive et de trouver des exemples ici.

  2. 3

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

    Vous devriez, au contraire, le changement de l'équivalence de la comparer à la chaîne [class.active]="shown == 'EQUIFAX'"

    À l'aide de [ngClass] vous [ngClass]="{'active': shown == 'EQUIFAX'}

    Voici une aire de jeux avec cette mise en œuvre: http://plnkr.co/edit/j2w8aiQPghl0bPZznoF2?p=preview

  3. 2

    vous pouvez le faire:

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