Tengo un problema para ocultar y mostrar un elemento que depende de una variable booleana en Angular 2.
este es el código para que el div muestre y oculte:
<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á "editada" y está almacenada en mi componente:
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); } }El elemento está oculto, cuando se inicia la función saveTodos, el elemento se muestra, pero después de 3 segundos, incluso si la variable vuelve a ser falsa, el elemento no se oculta. ¿Por qué?
Hay dos opciones dependiendo de lo que quieras lograr:
Puede usar la directiva oculta para mostrar u ocultar un elemento
<div [hidden]="!edited" class="alert alert-success box-msg" role="alert"> <strong>List Saved!</strong> Your changes has been saved. </div>Puede usar la directiva de control ngIf para agregar o eliminar el elemento. Esto es diferente de la directiva oculta porque no muestra/oculta el elemento, sino que lo agrega/elimina del DOM. Puede perder datos no guardados del elemento. Puede ser la mejor opción para un componente de edición que se cancela.
<div *ngIf="edited" class="alert alert-success box-msg" role="alert"> <strong>List Saved!</strong> Your changes has been saved. </div>Para su problema de cambio después de 3 segundos, puede deberse a una incompatibilidad con setTimeout. ¿Incluyó la biblioteca angular2-polyfills.js en su página?
Debe usar la directiva * 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); } }Actualización: le falta la referencia al alcance externo cuando está dentro de la devolución de llamada de tiempo de espera.
así que agregue el .bind (esto) como agregué arriba
P: editado es una variable global. ¿Cuál sería su enfoque dentro de un * ngFor-loop? – Blauhirn
R: Agregaría editar como una propiedad al objeto sobre el que estoy iterando.
<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); } }Cuando no le interese eliminar el Html Dom-Element, use *ngIf.
De lo contrario, usa esto:
<div [style.visibility]="(numberOfUnreadAlerts == 0) ? 'hidden' : 'visible' "> COUNTER: {{numberOfUnreadAlerts}} </div>