Tengo un loader.component.ts con el selector <app-loader>.

Esta etiqueta está en main-component.html y aparece.

<app-loader *ngIf="!showLoader === true">

Quiero que el cargador solo aparezca, mientras busco datos.

Traigo datos con el siguiente código:

showLoader = true;    
ngOnInit() {
        this.httpService.getOffer()
          .subscribe(
            data => this.offers = data
          )
        this.showLoader = false;
      }

Como puede ver, es la variable showLoader en verdadero, y después de recuperar los datos debería ser falsa, pero no funciona. Que pasa

1
Harvix 21 mar. 2017 a las 09:44

2 respuestas

La mejor respuesta

Mueva this.showLoader = false; a las funciones success y err del bloque subscribe. Debido a la función asíncrona de JavaScript, su showLoader se configura en False antes de la llamada de back-end.

Y una simple condición ngIf sería mejor.

<app-loader *ngIf="showLoader">
2
Avinash Raj 21 mar. 2017 a las 06:47

Lo más probable es que desee ocultar la ruleta después de recibir los datos o se produjo un error

showLoader = true;    

ngOnInit() {
  this.httpService.getOffer()
      .subscribe(
        data => {
          this.offers = data;
          this.showLoader = false;
        },
        error => this.showLoader = false
      )
}
1
smnbbrv 21 mar. 2017 a las 06:47