Как пользоваться в .ts при вызове службы API с использованием angular

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