typescript - elementos - Angular 2 Mostrar y Ocultar un elemento

ocultar div angular 6

Question

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 se almacena 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, se muestra el elemento, pero después de 3 segundos, incluso si la variable vuelve a ser falsa, el elemento no se oculta. ¿Por qué?

Answer 1

Cuando no le importa eliminar el elemento Dom HTML, use * ngIf.

De lo contrario, use esto:

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

Answer 2

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

Answer 3

Dependiendo de sus necesidades, *ngIf o [ngClass]="{hide_element: item.hidden}" donde la clase CSS hide_element es { display: none; } { display: none; }

*ngIf puede causar problemas si está cambiando las variables de estado *ngIf está eliminando, en esos casos usando la display: none; CSS display: none; es requerido.

Answer 4

Este es un buen caso de uso para una directiva. Algo como esto es sorprendentemente útil.

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

Answer 5

Hay dos opciones dependiendo de lo que quieras lograr:

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

2. 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, pero 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?

Answer 6

La solución @inoabrian anterior funcionó para mí. Me encontré con una situación en la que actualizaría mi página y mi elemento oculto volvería a aparecer en mi página. Esto es lo que hice para resolverlo.

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

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

Answer 7

Para que el componente secundario muestre que estaba usando *ngif="selectedState == 1"

En lugar de eso, usé [hidden]="selectedState!=1"

Funcionó para mí ... cargar el componente hijo correctamente y después de ocultar y no ocultar el componente hijo no estaba indefinido después de usar esto.

Answer 8

Podemos hacerlo usando el siguiente fragmento de código.

Código Angular:

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

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

Answer 9

Simplemente agregue bind (this) en su función setTimeout, comenzará a funcionar

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

y en cambio de 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>

A

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