Bootstrap 进度条不会在 Angular HTTP 事件进度中自动更新

Question

我正在尝试使用 bootstrap 进度条显示我的 post HTTP 事件请求的进度。事件进展完美（我正在控制台中查看）但更改不会显示在进度条中，除非我单击页面。这是我使用 HTTP 进度事件的服务：

progress: number = 0;
uploadClubMedia(folderName , fieldName , file): Observable<any>{
    const formData: FormData = new FormData();
    formData.append('file', file);
    return new Observable((success) => {
      const req = new HttpRequest('POST', `${constants.clubApiUrl}/media-upload/mediaFiles/${folderName}/${fieldName}`, formData, {
        reportProgress: true
      });
     this.http.request(req).subscribe((event: HttpEvent<any>) => {
        switch (event.type) {
          case HttpEventType.Sent:
            console.log('Request has been made!');
            break;
          case HttpEventType.ResponseHeader:
            console.log('Response header has been received!');
            break;
          case HttpEventType.UploadProgress:
            this.progress = Math.round(event.loaded / event.total * 100);
            // this.progress$ = new BehaviorSubject<number>(this.progress);
            console.log(`Uploaded: ${this.progress}%`);
            this.ref.tick();
            break;
          case HttpEventType.Response:
            console.log('Successfully Posted!', event.body);
            success.next(event.body);
            setTimeout(() => {
            this.progress = 0;
          }, 1500);
        }
      })
    })
}

这是我的 html:

<div class="progress form-group" *ngIf="mediaService.progress > 0">
  <div class="progress-bar bg-info" role="progressbar" [style.width.%]="mediaService.progress"> 
   {{mediaService.progress}}%
  </div>
</div>

我想不通这个问题。任何帮助是极大的赞赏。谢谢。

Answer 1

我使用 Angular 的 Event Emitter 解决了这个问题。 Event Emitter 的行为类似于 RxJS Subject，一旦被订阅就会发出值。因此，我将我的进度值推送到事件发射器中，并在我的组件中订阅了它。代码如下：

（内部服务）

// add the eventemitter
@Output()
  valueChanged: EventEmitter<number> = new EventEmitter<number>();
  progress: number = 0;

uploadClubMedia(folderName , fieldName , file): Observable<any>{
    const formData: FormData = new FormData();
    formData.append('file', file);
    return new Observable((success) => {
      const req = new HttpRequest('POST', `${constants.clubApiUrl}/media-upload/mediaFiles/${folderName}/${fieldName}`, formData, {
        reportProgress: true
      });
     this.http.request(req).subscribe((event: HttpEvent<any>) => {
        switch (event.type) {
          case HttpEventType.Sent:
            console.log('Request has been made!');
            break;
          case HttpEventType.ResponseHeader:
            console.log('Response header has been received!');
            break;
          case HttpEventType.UploadProgress:
            this.progress = Math.round(event.loaded / event.total * 100);
            this.valueChanged.emit(this.progress);
            // this.progress$.next(this.progress);
            // this.progress$.getValue();
            console.log(`Uploaded: ${this.progress}%`);
            this.ref.tick();
            break;
          case HttpEventType.Response:
            console.log('Successfully Posted!', event.body);
            success.next(event.body);
            setTimeout(() => {
            this.progress = 0;
            this.valueChanged.emit(0);
          }, 1500);
        }
      })
    })
    //return this._clubApiService.post(`/media-upload/mediaFiles/${folderName}/${fieldName}`, formData)
  }

//create a fucntion to subscribe to the value it emits
  public subscribeToProgressEvents(subscribeFn: (x: number) => any): void {
    this.valueChanged.subscribe(subscribeFn);
}

（内部组件）

updateProgress: number;

//subscibe to the function we created inside our service
ngOnInit() {
this.mediaService.subscribeToProgressEvents((progress: number) => {
      this.updateProgress = progress;
      this.cf.detectChanges();
    })
}

（在 HTML 内）

<div class="progress form-group m-2" *ngIf="updateProgress > 0" style="height: 20px; 
  width:95%;">
 <div style="font-size: 16px;" class="progress-bar progress-bar-striped " 
    [ngStyle]=" 
    { 'background-color': clubPrimaryColor }" role="progressbar" 
    [style.width.%]="updateProgress">{{updateProgress}}%
  </div>
</div>

这解决了问题。

Bootstrap 进度条不会在 Angular HTTP 事件进度中自动更新

Bootstrap progress bar not auto-updating in Angular HTTP Event progress

bootstrap-4

angular

angular-httpclient