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

這是我所做的：加載圖標組件：

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