Angular 2 Afficher et masquer un élément

J'ai un problème à cacher et à afficher un élément dépendant d'une variable booléenne dans Angular 2.

voici le code que le div doit afficher et masquer:

<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 "édité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 revient à false, l'élément ne se cache pas. Pourquoi?

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: il vous manque la référence à la portée externe lorsque vous êtes dans le rappel Timeout.

alors ajoutez le .bind (ceci) 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 j'itère.

<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);
  }
}

Il existe deux options en fonction de ce que vous souhaitez 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 masquée car elle n'affiche / masque pas l'élément, mais elle ajoute / supprime du DOM. Vous pouvez perdre les données non enregistrées de l'élément. Cela peut être le meilleur choix pour un composant d'édition qui est 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 au bout de 3 secondes, cela peut être dû à une incompatibilité avec setTimeout. Avez-vous inclus la bibliothèque angular2-polyfills.js dans votre page?

Lorsque vous ne vous souciez pas de supprimer l'élément Html Dom-Element, utilisez * ngIf.

Sinon, utilisez ceci:

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

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 .. le chargement du composant enfant correctement et après cacher et un-hide composant enfant n'était pas indéfini après avoir utilisé cela.

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

@Directive({selector: '[removeAfter]'}) export class RemoveAfter {
  constructor(readonly element: ElementRef<HTMLElement>) { }

  /**
   * Removes the attributed element after the specified number of milliseconds. 
   * Defaults to (1000)
   */
  @Input() removeAfter = 1000;


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

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

Code angulaire:

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

Modèle HTML:

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

En fonction de vos besoins, *ngIfou [ngClass]="{hide_element: item.hidden}"lorsque la classe CSS hide_elementest{ display: none; }

*ngIfpeut causer des problèmes si vous changez les variables d'état *ngIfest la suppression, dans ces cas, l'utilisation de CSS display: none;est requise.

La solution @inoabrian ci-dessus a fonctionné pour moi. Je suis tombé sur 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;
      }
}

Ajoutez simplement bind (this) dans votre fonction setTimeout, cela 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>