從httpclient.get獲取數據的Angular Show加載器

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 im。

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>