Question

我想知道从api提取数据时如何添加加载程序。在数据到来之前，我需要加载程序。

this.clientData = this.httpClient.get(url,{responseType: 'json'}).
  subscribe(data => {
   //here the loader come i think
  console.log(data);
  this.data = data.records;
 }

，并且在提取数据时，加载器关闭。如果可能的话，还可以在应用程序中使用bootstrap。

Answer 1

我不知道这是否是最好的方法，但我想它会起作用

async getCall() {
  // Show loader here
  this.showLoader = true;

  this.clientData = await this.httpClient.get(url,{responseType: 'json'}).toPromise();

  // Hide Loader here
  this.showLoader = false;
}

Answer 2

组件

this.IsLoading = true;
    this.httpClient.get(url,{responseType: 'json'}).subscribe(
      (data: any) => {
        this.data = res.records;
        console.log(res);
      },
      error => { },
      () => (this.IsLoading = false)
    );
  }

html文件

<div class="content" [appSpinner]="IsLoading">
/*show content*/
</div>

并将spinner添加为directive

或者，如果您不想使用指令，则可以简单地使用

<div class="content" *ngIf="IsLoading">
/***/
</div>

从httpclient.get获取数据的Angular Show加载器

2 个答案: