web-dev-qa-db-fra.com

Angular 2 Afficher et masquer un élément

J'ai du mal à cacher et à montrer un élément dépendant d'une variable booléenne dans Angular 2.

c'est le code pour que la div affiche et cache:

<div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

la variable est "modifiée" et elle est stockée dans mon composant:

export class AppComponent implements OnInit{

  (...)
  public edited = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }, 3000);
  }
}

L'élément est masqué. Lorsque la fonction saveTodos démarre, l'élément est affiché, mais après 3 secondes, même si la variable redevient false, l'élément n'est pas masqué. Pourquoi?

typescriptangular
138
user4956851

Vous devez utiliser la directive * ngIf

<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>


export class AppComponent implements OnInit{

  (...)
  public edited = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);
  }
}

Mise à jour: vous manquez la référence à l'étendue externe lorsque vous vous trouvez dans le rappel Timeout.

alors ajoutez le .bind (this) comme j'ai ajouté ci-dessus

Q: édité est une variable globale. Quelle serait votre approche dans une boucle * ngFor? - Blauhirn 

R: J'ajouterais edit en tant que propriété à l'objet sur lequel je parcours.

<div *ngFor="let obj of listOfObjects" *ngIf="obj.edited" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>


export class AppComponent implements OnInit{

  public listOfObjects = [
    {
       name : 'obj - 1',
       edit : false
    },
    {
       name : 'obj - 2',
       edit : false
    },
    {
       name : 'obj - 2',
       edit : false
    } 
  ];
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);
  }
}
143
inoabrian

Il y a deux options selon ce que vous voulez réaliser:

  1. Vous pouvez utiliser la directive hidden pour afficher ou masquer un élément

    <div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
  <strong>List Saved!</strong> Your changes has been saved.
</div>

  2. Vous pouvez utiliser la directive de contrôle ngIf pour ajouter ou supprimer l'élément. Ceci est différent de la directive hidden car elle n’affiche/cache pas l’élément mais ajoute/supprime du DOM Vous pouvez perdre des données non sauvegardées de l'élément. Ce peut être le meilleur choix pour un composant d'édition annulé.

    <div *ngIf="edited" class="alert alert-success box-msg" role="alert"> 
  <strong>List Saved!</strong> Your changes has been saved.
</div>

Pour votre problème de changement après 3 secondes, cela peut être dû à une incompatibilité avec setTimeout. Avez-vous inclus la bibliothèque angular2-polyfills.js dans votre page?

154
gentiane

Lorsque vous ne vous souciez pas de supprimer le HTML Elément, utilisez * ngIf 

Sinon, utilisez ceci:

<div [style.visibility]="(numberOfUnreadAlerts == 0) ? 'hidden' : 'visible' ">
   COUNTER: {{numberOfUnreadAlerts}} 
</div>
26
Dudi

Pour que le composant enfant montre que j'utilisais *ngif="selectedState == 1" 

Au lieu de cela, j'ai utilisé [hidden]="selectedState!=1" 

Cela a fonctionné pour moi .. charger le composant enfant correctement et après masquer et dé-masquer le composant enfant n'était pas indéfini après avoir utilisé ceci.

13
Swapnil Kale

C'est un bon cas d'utilisation d'une directive. Quelque chose comme cela est étonnamment utile.

@Directive({selector: '[removeAfter]'}) export class RemoveAfter {

  @Input() removeAfter: number;

  constructor(readonly element: ElementRef) { }

  ngOnInit() {
    setTimeout(() => {
      this.element.nativeElement.remove();
    }, this.removeAfter);
  }
}
6
Aluan Haddad

Selon vos besoins, *ngIf ou [ngClass]="{hide_element: item.hidden}" où la classe CSS hide_element est { display: none; }

*ngIf peut entraîner des problèmes si vous modifiez les variables d'état que *ngIf est en train de supprimer. Dans ce cas, CSS display: none; est requis.

3
Luke Dupin

Nous pouvons le faire en utilisant l'extrait de code ci-dessous.

Code angulaire:

 export class AppComponent {  
    toggoleShowHide:string ="visible";  
 }

Modèle HTML:

  Enter text to hide or show item in bellow: 
  <input type="text" [(ngModel)]="toggoleShowHide">
  <br>
  Toggle Show/hide:
  <div [style.visibility]="toggoleShowHide">   
     Final Release Angular 2!
  </div>
3
Rejwanul Reja

La solution @abrian ci-dessus a fonctionné pour moi. Je me suis retrouvé dans une situation où je rafraîchirais ma page et mon élément caché réapparaîtrait sur ma page. Voici ce que j'ai fait pour le résoudre.

export class FooterComponent implements OnInit {
public showJoinTodayBtn: boolean = null;

ngOnInit() {
      if (condition is true) {
        this.showJoinTodayBtn = true;
      } else {
        this.showJoinTodayBtn = false;
      }
}
0
Jason Spence

Ajoutez simplement bind (this) dans votre fonction setTimeout, il commencera à fonctionner

setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);

et en changement HTML

<div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

À

<div *ngIf="edited" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>
0
Mukesh Rawat