Angulaire 2 Bascule Des Vues Sur Le Clic

J'ai un bootstrap de la carte, qui dispose de trois différentes vues de contenu à l'intérieur. Je suis contrôler la vue de chacun de ces ensembles de données onclick d'un lien pour chacun d'eux. Le problème est que lorsque je clique sur un lien il ne cache pas la précédente. J'ai de la difficulté à obtenir la fonction à droite avec des caractères d'imprimerie.

dans mon composant.fichier ts 

  public showEquifax:boolean = true;
  public showExperian:boolean = false;
  public showTransunion:boolean = false;

Ensuite dans mon fichier html 

 <div class="btn-group" role="group" aria-label="Credit Report Navigation">
                    <button (click)="showEquifax = !showEquifax" type="button" class="btn btn-secondary">Equifax Report </button>
                    <button (click)="showExperian = !showExperian" type="button" class="btn btn-secondary">Experian Report </button>
                    <button (click)="showTransunion = !showTransunion" type="button" class="btn btn-secondary">Transunion Report </button>
                </div>

Basé sur cette logique, comment puis-je changer la boolean valeur des fonctions de false lorsque le lien cliqué valeur est modifiée à true

J'ai essayé de faire quelque chose comme cela,

public showEquifax() {
    showExperian() = false;
    showTransunion() = false;
    return true;
}

Mais j'obtiens une erreur de gauche expression d'affectation.

Comment puis-je écrire chacune de ces fonctions booléennes de changer les autres à faux lorsque la fonction est définie sur vrai?

InformationsquelleAutor wuno | 2016-11-08
  1. 3

    Ce que vous voulez, c'est: quand on est illustré, les deux autres sont cachés, non? Ce changement votre logique à quelque chose comme ceci:

    //On the class, instead of 3 booleans
private shown: string = 'EQUIFAX';

    Ensuite, les boutons agir comme ceci:

    <button (click)="shown = 'EQUIFAX'" type=="button" ...
<button (click)="shown = 'EXPERIAN'" type="button" ...
<button (click)="shown = 'TRANSUNION'" type="button" ...

    Ensuite, vous pouvez montrer à vos composants comme ceci:

    <div *ngIf="shown === 'EQUIFAX'">
    content here
</div>

<div *ngIf="shown === 'EXPERIAN'"> ... </div>
<div *ngIf="shown === 'TRANSUNION'"> ... </div>
    • C'est un grand homme. Merci pour ce si simple. Pourriez-vous me dire aussi comment faire quelque chose comme ceci sur un bouton comme je suis à l'aide? routerLinkActive="active" qui ne fonctionne que pour les liens de routeur je suppose. Essentiellement, la façon de montrer le bouton active au chargement de la page?
    • Il suffit d'ajouter une classe CSS conditionnellement, comme: <button [class]="shown === 'EQUIFAX' ? 'activeClass' : ''">, avec activeClass être une classe CSS avec le style du bouton actif, comme .activeClass { background:red; }.
    • Merci une tonne pour toute votre aide!
    InformationsquelleAutor Rodrigo