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

【问题标题】：Bootstrap progress bar not auto-updating in Angular HTTP Event progressBootstrap 进度条不会在 Angular HTTP 事件进度中自动更新
【发布时间】：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。变更检测在服务中不起作用。

标签： angular bootstrap-4 angular-httpclient

【解决方案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>

这样就解决了问题。

【讨论】：