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

Posted 2023-03-21

【中文标题】Bootstrap 进度条不会在 Angular HTTP 事件进度中自动更新

【英文标题】：Bootstrap progress bar not auto-updating in Angular HTTP Event progress

【发布时间】：2022-01-17 13:02:41

【问题描述】：

我正在尝试使用引导进度条通过 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>

我无法找出问题所在。任何帮助是极大的赞赏。谢谢。

【问题讨论】：

您使用默认更改检测还是推送？

不，我没有使用变更检测或 onPush。变更检测在服务中不起作用。

【参考方案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>

这样就解决了问题。