Angular 2 Afficher et masquer un élément

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

c’est le code pour que le div affiche et cache:

 List Saved! Your changes has been saved.

la variable est “modifiée” et 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 caché, lorsque la fonction saveTodos démarre, l’élément est affiché, mais après 3 secondes, même si la variable revient à la valeur false, l’élément ne se cache pas. Pourquoi?

Vous devez utiliser la directive * ngIf

  List Saved! Your changes has been saved. 
 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: la référence à l’étendue externe est manquante lorsque vous êtes dans le rappel Timeout.

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

Q: edit est une variable globale. Quelle serait votre approche dans un * ngFor-loop? – Blauhirn

R: J’appendais edit comme une propriété à l’object que je répète.

  List Saved! Your changes has been saved. 
 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 y a deux options selon ce que vous voulez réaliser:

Vous pouvez utiliser la directive masquée pour afficher ou masquer un élément
```
  List Saved! Your changes has been saved.  
```
Vous pouvez utiliser la directive de contrôle ngIf pour append ou supprimer l’élément. Ceci est différent de la directive cachée car elle ne montre / masque pas l’élément, mais ajoute / supprime du DOM. Vous pouvez perdre des données non enregistrées de l’élément. Cela peut être le meilleur choix pour un composant d’édition qui est annulé.
```
  List Saved! Your changes has been saved.  
```

Pour vous 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?

Si vous ne souhaitez pas supprimer l’élément HTML Html, utilisez * ngIf.

Sinon, utilisez ceci:

  COUNTER: {{numberOfUnreadAlerts}}

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 avoir masqué et dé-masqué le composant enfant n’était pas indéfini après avoir utilisé ceci.

C’est un bon exemple 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); } }

Nous pouvons le faire en utilisant le code ci-dessous.

Code angular:

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

Modèle HTML:

  Enter text to hide or show item in bellow:  
 Toggle Show/hide:  Final Release Angular 2!

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

*ngIf peut causer des problèmes si vous modifiez les variables d’état *ngIf supprime, dans ces cas-là, en utilisant l’ display: none; CSS display: none; est requirejs.

La solution @inoabrian 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; } }