角10可观测多次响应

Question

我有一个功能，在我的角10应用程序，我创建一个blob和上传一个文件。当我订阅可观察到的内容时，它会回复五次。我不知道在哪里或者为什么？

uploadBacklogUploadFile(data, fileName: string) {
    const blob = new Blob([data], { type: 'text/csv' });
    this.backlogUploadService
      .uploadBacklogFile(blob, fileName, this.selectedJoin.id)
      .subscribe(        
        () => {  <-----this block of code will run 5 times
          this.uploadPercent = 100;
          this.dialogRef.close(true);
          this.openDialog();
          this.backlogUploaded.emit(true);
        },
        () => {
          this.uploadPercent = 0;
          this.snackBar.open('The backlog failed to be uploaded', null, {
            panelClass: 'snack-bar-error'
          });
        },
      );
  }

还有我的服务

  public uploadBacklogFile(file: string | Blob, fileName: string, Id: number): Observable<HttpEvent<any>> {
    const requestView = new BacklogUploadRequestView(Id);
    const formData: FormData = new FormData();
    formData.append('backlogUpload', new Blob([JSON.stringify(requestView)], { type: 'application/json' }), '');
    formData.append('file', file, fileName);
    const headers = new HttpHeaders({
      Accept: 'application/json',
    });
    const url = this.remoteClientUtils.getThorUrl() + `${this.BACKLOG_UPLOAD_URL}`; 
    console.log("checkpoint") <------- this will only log once, so it must be nothing above?
    return this.httpClient.request(HttpMethods.POST, url, {
      body: formData,
      headers: headers,
      reportProgress: true,
      observe: 'events'
    })
    .pipe(
      catchError(this.remoteClientUtils.handleError<HttpEvent<any>>(null)));
  }

Answer 1

您试图跟踪上载的进度，当您使用reportProgress和observe (https://angular.io/guide/http#requesting-data-from-a-server)时，我认为您应该删除这些选项

this.httpClient.request(HttpMethods.POST, url, {
   body: formData,
   headers: headers,
   reportProgress: true, //delete this
   observe: 'events'    // and delete this
})