Question

我有一个表单需要输入，要求用户提取数字。提交表单时，我想要一个＆＃34; spinner图形＆＃34;在生成和格式化数据时显示目前，在返回数据之前，我无法显示微调器。

我的代码如下：

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

Angular2在等待加载数据时更新视图

1 个答案: