Angulaire 2 Afficher et Masquer un élément

Je vais avoir un problème de masquage et affichage d'un élément en fonction d'une variable booléenne Angulaire 2.

ceci est le code de la div pour 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 "modifié" et il est stocké 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é, quand saveTodos fonction démarre, l'élément est affiché, mais au bout de 3 secondes, même si la variable revenir à false, l'élément ne doit pas se cacher. Pourquoi?

InformationsquelleAutor | 2016-02-02

angular typescript

148

Vous devez utiliser l' *ngIf Directive

<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 à l'extérieur de la portée lorsque vous êtes à l'intérieur du Délai de rappel.

alors ajoutez-le .bind(ce) comme je l'ai ajoutée au-Dessus de

Q : édité est une variable globale. Quelle serait votre approche au sein d'un *ngFor en boucle? – Blauhirn

Un : je voudrais ajouter, modifier comme une propriété de l'objet que je suis à parcourir.

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

edited est une variable globale. Quelle serait votre approche au sein d'un *ngFor-loop?
Edité ne serait pas une variable globale, il appartient à la composante. J'ajouterai à la réponse ci-dessus.
comment accéder à la minuterie à l'échelle mondiale de service?

InformationsquelleAutor inoabrian

158

Il y a deux options, selon ce que vous voulez atteindre :
1. Vous pouvez utiliser le caché de la directive 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 le ngIf directive de contrôle d'ajouter ou de supprimer l'élément. Ceci est différent de l'cachés de la directive, car il n'a pas d'afficher /masquer un élément, mais il ajouter /supprimer du DOM. Vous pouvez perdre des données non enregistrées de l'élément. Il peut être le meilleur choix pour modifier un composant qui est annulée.
```
<div *ngIf="edited" class="alert alert-success box-msg" role="alert"> 
  <strong>List Saved!</strong> Your changes has been saved.
</div>
```
Pour vous le problème du changement après 3 secondes, cela peut être dû à une incompatibilité avec setTimeout. Avez-vous inclus angular2-polyfills.js bibliothèque dans votre page ?
- [hidden]="edited" ne semble pas avoir des effets...?
- Dans le cas où vous avez des problèmes avec l'caché, veuillez suivre la réponse de stackoverflow.com/a/35578093/873282: [hidden] { display: none !important;} dans votre css.
InformationsquelleAutor gentiane
27

Lorsque vous n'avez pas de soins sur la suppression du Dom Html-Élément, utilisez *ngIf.

Sinon, utilisez ceci:
```
<div [style.visibility]="(numberOfUnreadAlerts == 0) ? 'hidden' : 'visible' ">
   COUNTER: {{numberOfUnreadAlerts}} 
</div>
```
InformationsquelleAutor Dudi
13

Pour enfant composant pour montrer que j'ai été en utilisant *ngif="selectedState == 1"

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

Il a travaillé pour moi.. le chargement du composant enfant correctement et après la peau et non cacher composant enfant n'était pas non défini après l'utilisation de ce.

InformationsquelleAutor Swapnil Kale
6

C'est un bon cas d'utilisation de directive. Quelque chose comme ceci est très utile.
```
@Directive({selector: '[removeAfter]'}) export class RemoveAfter {

  @Input() removeAfter: number;

  constructor(readonly element: ElementRef) { }

  ngOnInit() {
    setTimeout(() => {
      this.element.nativeElement.remove();
    }, this.removeAfter);
  }
}
```
- J'aime l'idée, mais cela permettra d'éliminer l'élément complètement. Je l'ai changé à cacher, donc vous pouvez le réutiliser, mais cela ne veut pas masquer l'élément sans doute en raison de la ngIf est true. Est-il un moyen de régler le parent variable qui contrôle ce false?
- Ne pouvez-vous pas simplement d'ajouter une classe caché ou quelque chose au lieu d'appeler à supprimer? Cette technique est assez générique.
- Je pense que le problème est ngIf est plus de savoir si l'élément est dans le DOM ou pas. Ce que je veux, c'est ceci: <div [hidden]="messages" [removeAfter]=3000>... où je afficher/masquer les messages si il y a de tout et puis de supprimer les messages après 3 secondes, de sorte que l'utilisateur n'a pas à fermer la boîte. J'ai ajouté votre directive ci-dessus et commuté à faire un hide() mais il n'est pas appelée lorsque les messages sont affichés. Comment puis-je obtenir pour être invoqué à l'événement? @Output() et EventEmitter?
InformationsquelleAutor Aluan Haddad
3

En fonction de 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 décidez de changer les variables d'état *ngIf est la suppression, dans ces cas, à l'aide de CSS display: none; est nécessaire.

InformationsquelleAutor Luke Dupin

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

Angulaire Code:

 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>

InformationsquelleAutor Rejwanul Reja

@inoabrian solution ci-dessus a fonctionné pour moi. J'ai couru dans une situation où je refresh ma page et mon élément masqué réapparaissent 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;
      }
}

InformationsquelleAutor Jason Spence

Juste ajouter bind(ce) dans votre fonction setTimeout il va commencer à travailler

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

et en HTML changement

<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>

InformationsquelleAutor Mukesh Rawat

Vous devez vous connecter pour publier un commentaire.