Angular2 Aktualisieren Sie eine Ansicht, während Sie auf das Laden von Daten warten

Question

Ich habe ein Formular, das eine Eingabe erfordert, die einen Benutzer zur Auswahl von Zahlen auffordert. Wenn das Formular gesendet wird, möchte ich eine "Spinner-Grafik" anzeigen, während die Daten generiert und formatiert werden.
Im Moment kann ich den Spinner erst anzeigen lassen, nachdem die Daten zurückgegeben wurden.

Mein Code sieht so aus:

getTickets(){ 
    this.PBPicks=this._lottoService.getPBTicket(this.newTixForm.value['PBTix']); 
    this.MegaPicks=this._lottoService.getMegaTicket(
    this.newTixForm.value['MegaTix']); 
    return false; 
} 

submitForm(){ 
    this.isLoading=true; 
    console.log('Show Spinner'); 
    this.isLoading=this.getTickets(); 
    console.log("Data Loaded"); 
} 

Wenn die Daten zurückgegeben und angezeigt wird, wenn die Spinner zeigt und dann verschwindet, obwohl die Konsole zeigt es viel früher als ausgeführt wird, wenn die Daten zurückgegeben werden. Hier

Answer 1

ist das, was ich getan habe: Loading Symbol Komponente:

isLoading = false; 
    constructor() { } 

    ngOnInit() {} 
    show() 
    { 
    this.isLoading = true; 
    } 
    hide() 
    { 
    this.isLoading = false; 
    } 

Loading-icon.component.html

<span *ngIf="isLoading"> 
    <img src="/assets/images/loading.gif" alt=""> 
</span> 

App.Component.ts

//To get access to component and its method, using the @ViewChild decorator 
@ViewChild('imLoading') imLoading: LoadingIconComponent; 

this.model.getData = getData; 
this.imLoading.show();