Angular2データがロードされるのを待っている間にビューを更新します

Question

私は、入力する必要のあるフォームをユーザーが選択する必要があります。 フォームが送信されるときに、データが生成されてフォーマットされている間に、「スピナーグラフィック」を表示します。
現時点では、データが返されるまで、スピンナーを表示することができません。データが返され、表示され

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

がときスピナーショーで、その後、コンソールが、それははるかに早くデータが返されたときよりも実行されているのを表していても消える：

私のコードは次のようになります。ここで

Answer 1

は私がやったことです： ロードアイコンコンポーネント：NGについてどのように

isLoading = false; 
    constructor() { } 

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

ロード-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();