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