javascript - Angular2 在等待数据加载时更新 View

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

正在加载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();