如何使用< mat-progress-bar>在.ts中，同时使用angular调用API服务

问题描述

我正在使用API​​调用从服务中获取图像，并且我想使用进度条，直到获取图像为止.可能需要在服务中设置进度条，因为图像是从服务响应返回的.如何用于这种情况.任何帮助对此表示感谢.谢谢.

I am using a API call to fetch the image from service and I would like to use a progress bar until the image is fetched. Probably I need to set the progress bar in service as the image is returned from service response. How to use for this scenario. Any help on this is much appreciated. Thanks.

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

推荐答案

您可以使用布尔值显示进度条.在方法的开头添加一个布尔值以显示微调框，最后将其设置为false.

You can use a boolean value to show a progress bar. Add a boolean to show spinner at start of the method and at end make it to 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;
    });   }

这篇关于如何使用< mat-progress-bar>在.ts中，同时使用angular调用API服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！