webentwicklung-frage-antwort-db.com.de

Wie verwende ich reportProgress in HttpClient in Angular?

Ich lade die Datei mit der Methode HTTPPOST herunter. Ich möchte eine andere Methode aufrufen, um dem Endbenutzer den Download-Fortschritt anzuzeigen, bis der Dateidownload abgeschlossen ist. Verwendung von reportProgress in HttpClient hierfür.

  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

Sie müssen reportProgress: true verwenden, um den Fortschritt einer HTTP Anfrage anzuzeigen. Wenn Sie all events, including the progress of transfers sehen möchten, müssen Sie auch die Option observe: 'events' Verwenden und eine Observable vom Typ HttpEvent. Dann können Sie alle events(DownloadProgress, Response..etc) in der Komponentenmethode abfangen. Weitere Details finden Sie in 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' },
      )
    });
  }

Dann können Sie in der Komponente alle events wie unten abfangen.

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

sie müssen HttpClientModule in Ihr AppModule einfügen

sie müssen zuerst ein Anforderungsobjekt erstellen, indem Sie eine Instanz der HttpRequest-Klasse erstellen und die Option reportProgress verwenden.

Weitere Informationen finden Sie unter: https://alligator.io/angular/httpclient-intro/

1
Shilpa Soni