web-dev-qa-db-ja.com

AngularのHttpClientでreportProgressを使用するにはどうすればよいですか？

HTTPPOSTメソッドを使用してファイルをダウンロードしています。ファイルのダウンロードが完了するまでエンドユーザーにダウンロードの進行状況を表示する別のメソッドを呼び出したいのですが。 reportProgressでHttpClientを使用する方法。

  downfile(file: any): Observable<any> {

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }
angularhttpclientangular7
11
karthik thurairaja

_reportProgress: true_を使用して、HTTPリクエストの進行状況を表示する必要があります。 _all events, including the progress of transfers_を表示したい場合は、_observe: 'events'_オプションも使用して、ObservableタイプHttpEvent。次に、コンポーネントメソッド内のすべてのevents(DownloadProgress, Response..etc)をキャッチできます。 Angular Official Documentation 。で詳細を確認してください

_  downfile(file: any): Observable<HttpEvent<any>>{

    return this.http.post(this.url , app, {
      responseType: "blob", reportProgress: true, observe: "events", headers: new HttpHeaders(
        { 'Content-Type': 'application/json' },
      )
    });
  }
_

次に、コンポーネントですべてのeventsを以下のようにキャッチできます。

_this.myService.downfile(file)
    .subscribe(event => {

        if (event.type === HttpEventType.DownloadProgress) {
            console.log("download progress");
        }
        if (event.type === HttpEventType.Response) {
            console.log("donwload completed");
        }
});
_

Find HttpEventTypes Here。

20
Sudarshana Dayananda

appModuleにHttpClientModuleを追加する必要があります

まず、HttpRequestクラスのインスタンスを作成し、reportProgressオプションを使用して、リクエストオブジェクトを作成する必要があります。

詳細については、以下を参照してください。 https://alligator.io/angular/httpclient-intro/

1
Shilpa Soni