如何使用<mat-progress-bar>在 .ts 中，同時使用 angular 調用 API 服務

Question

我正在使用 API 調用從服務中獲取圖像，並且我想在獲取圖像之前使用進度條。 可能我需要在服務中設置進度條，因為圖像是從服務響應中返回的。 如何用於此場景。 非常感謝您對此的任何幫助。 謝謝。

HTML：

<div class="info_image" *ngIf="profileImage">
        <ngx-image-zoom
        [fullImage]="profileImage"
        [thumbImage]="profileImage"
        zoomMode='hover'
        ></ngx-image-zoom>
      </div>
      <div *ngIf="!profileImage">
        We couldnot load the image
      </div>
Below is the .ts code to fetch image from service:

retrieveProfileImage() {
this.apiService.fetchProfileImage()
      .then(response => {
        console.log(response); // this response has the profielImg
        this.profileImage = response.profileImg;
      }).catch((error) => {
        console.log(error);

      });

}

service.ts :

fetchProfileImage(): Promise<any> {
    return this.http
      .post('/auth/profile/retrieveProfileImage',
        new RequestOptions({ headers: headers }))
      .toPromise()
      .then(response => {  //returns response here,need to set progress bar here until image is fetched 
        return response.json() as any;
      })
      .catch(this.handleError);
  }

Answer 1

您可以使用布爾值來顯示進度條。 添加一個布爾值以在方法開始時顯示微調器，並在結束時將其設置為 false。

getAllPlaybooks() {
    this.displaySpinner = true;
    //First get all playbooks and use first playbook as id for default sidedrawer
    this.keypointService.getAllPlaybooksOfACustomer().subscribe((res: any) => {
      this.totalPlaybooks = res;
    }, err => {
      this.displaySpinner = false;
      this.toasterService.showFailure('Sorry something went wrong');
    }, () => {
      this.displaySpinner = false;
    });   }