Ladeprogramm beim Abrufen von Daten in Angular 2 anzeigen

Question

Ich habe eine loader.component.ts mit dem Selektor <app-loader>.

Dieser Tag ist in main-compontent.html und erscheint.

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

Ich möchte, dass der Lader sollte zeigen gerade, während ich Daten abgerufen werden.

Ich hole Daten mit folgenden Code:

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

Wie Sie sehen können, ist die showLoader Variable auf wahr, und nach dem Abrufen von Daten es falsch sein sollte, aber es nicht funktioniert tun. Was ist los mit dir?

Answer 1

die this.showLoader = false; in die success und err Funktionen des subscribe Block verschieben. Aufgrund der asynchronen Funktion von javascript wird showLoader vor dem Back-End-Aufruf auf False gesetzt. Eine einfache ngIf Bedingung wäre besser.

<app-loader *ngIf="showLoader"> 

Answer 2

Sie höchstwahrscheinlich wollen den Spinner , nachdem die Daten oder empfangen wird ein Fehler

aufgetreten verstecken

showLoader = true;  

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