Angular Прослушивание начала и завершения сетевого вызова (функция загрузки) для отображения индикатора выполнения или счетчика

Question

У меня есть функция загрузки, которая запускается нажатием кнопки. Когда это произойдет, я хочу отобразить индикатор выполнения / счетчик, пока выполняется сетевой вызов, а затем скрыть индикатор / счетчик после начала загрузки.

Я буду использовать angular material mat-progress- бар. Моя идея состояла в том, чтобы прослушать начало сетевого вызова и определить его как isLoading = true, а его завершение, которое приведет к ссылке на файл или ошибке, установит isLoading = false, чтобы скрыть индикатор выполнения, например

   <mat-progress-bar mode="indeterminate *ngIf 
   ="isLoading"</mat-progress-bar>

для отображения и скрытия индикатора выполнения.

Я попытался сделать это, выполнив что-то вроде:

   this.documents.find(document => document.id 
   === element.id).isLoading = true 

, а затем определив isLoading как false в моей подписке, но это не совсем то, что Мне нужно это сделать.

Это моя функция загрузки:

download(element: Document | TDoc, index: 
    number) {if (
    (!this.isTDoc && ! 
    (<Document>element).files.length) ||
    (this.isTDoc && !(<isTDoc>element).url)
    )
     return;

if (this.isTDoc) {
  const url = (<TDoc>element).url;
  const fileName = `${(<TDoc>element).itemName}.pdf`;

  downloadLink(url, fileName);
} else {
  const query = 'index=' + index.toString();
  this.documentService
    .downloadDocument((<Document>element).serialnumber, query)
    .pipe(
      filter(res => !!res),
      take(1)
    )
    .subscribe(res => {
      const fileName = `${(<Document>element).serialnumber}.pdf`;
      downloadBlob([res], fileName, 'application/pdf');
    });
}

Мой сервис документов: ...

   downloadDocument(serialNumber: string, query: 
  string) {
   const url = someURL(serialNumber, query);
   return this.dataService.asyncRequest(
   RequestTypes.GET,
   url,
   null,
   ServerHosts.TDocSERVER,
   {
     responseType: 'arraybuffer'
   }
  );

Моя другая попытка была создать Файл DocumentDownloadActions, определите REQUEST / SUCCESS / FAILURE и затем isLoading = true при вызове функции, а затем, как и ранее, завершите при наличии файла или ошибки.

  this.someDownloadService.get('someApiUrl', 
  somePayload).pipe(
   map((res) => {
   this.dispatch(new DownloadSuccessAction());
     return res;
  }),
  catch((err) => {
  this.dispatch(new DownloadFailureAction());
  })

Было бы лучше прослушивать HTTP-вызов способ сделать это, так как я мог сопоставить индикатор выполнения с прогрессом сети, используя Value?

Answer 1

Вы можете показать или скрыть индикатор выполнения, используя *ngIF="isLoading". У меня есть простой сценарий, реализованный, чтобы показать функциональность. Есть вход и кнопка поиска. Что бы ни вводил пользователь, и по нажатию кнопки поиска создается вызов API, и отображаются данные возврата из API. При нажатии я устанавливаю this.isLoading=true, и как только мы получаем ответ API, я устанавливаю значение false, то есть this.isLoading=false. Фрагмент кода:

public onSearch(): void {
this.isLoading=true;
this.searchItems = [];
const tag: string = this.searchItem;

this.sampleService
  .search(tag)
  .pipe(
    finalize(() => (this.isLoading = false)),
    first()
  )
  .subscribe(
    results => {
      this.searchItems = results.query.search;
    },
    (error) => {
      console.log('Error: '. error);
    }
  );
 }

In HTML:

<input placeholder="Search something" [(ngModel)]="searchItem"/><button 
 (click)="onSearch()">Search</button>
<mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>

<hr>

<h2>Search result:</h2>

<div *ngIf="searchItems && searchItems.length>0">
 <div *ngFor="let item of searchItems">
  <h4>{{item?.title}}</h4>
 </div>
</div>

Пример кода приведен по ссылке ниже:

https://stackblitz.com/edit/angular-sf-mat-progress-bar?file=src%2Fapp%2Fapp.component.ts

URL-адрес демонстрации:

https://angular-sf-mat-progress-bar.stackblitz.io

Надеюсь, это решит вашу проблему.