正文 

当前位置： 首页 > 问答 >

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

     2023-03-21     259

关键词：

【中文标题】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>

这样就解决了问题。

【讨论】：

如何在 BootStrap 中创建一个与边缘有间距的进度条

】如何在BootStrap中创建一个与边缘有间距的进度条【英文标题】：HowToCreateAProgressBarWithSpacingFromTheEdgesInBootStrap【发布时间】：2021-07-0601:42:02【问题描述】：我正在尝试创建一个与进度条边缘有一定间距的进度条。以下图片是我正... 查看详情

bootstrap进度条组件详解(代码片段)

Bootstrap进度条组件详解首先需要导入相关bootsrap的组件包：bootstrap.min.css、jquery.min.js、bootstrap.min.js等，这个就不多说了在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属... 查看详情

如何在 Bootstrap 3 中为进度条设置动画？

】如何在Bootstrap3中为进度条设置动画？【英文标题】：HowtoanimateaprogressbarinBootstrap3?【发布时间】：2015-03-2306:04:02【问题描述】：我正在尝试为Bootstrap进度条设置动画，但我不知道该怎么做。我得到了宽度的值，但console.log(bar_wid... 查看详情

Bootstrap 4 导航栏不会在 Angular 4 中折叠

】Bootstrap4导航栏不会在Angular4中折叠【英文标题】：Bootstrap4NavbardoesntcollapseinAngular4【发布时间】：2018-04-1406:07:35【问题描述】：我在Angular4项目中使用Bootstrap4和Ng-Bootstrap，我已经以这种方式在我的angular-cli.json中链接了quebootstrap.... 查看详情

Angular Bootstrap 警报不会在超时时关闭

】AngularBootstrap警报不会在超时时关闭【英文标题】：AngularBootstrapalertsdonotdismissonatimeout【发布时间】：2014-12-1721:36:44【问题描述】：我正在尝试从AngularBootstrap添加警报并在超时时自行关闭。然而，它并没有放弃自己。代码如下... 查看详情

bootstrap进度条

【Bootstrap进度条】1、基础进度条<divclass="progress"><divclass="progress-bar"style="width:40%;"></div></div>　　1）根div必须class="progress"　　2）前景div为class="progress-bar",通过style指定宽度　　2、指定颜色.　　 查看详情

Twitter Bootstrap：进度条居中文本

】TwitterBootstrap：进度条居中文本【英文标题】：TwitterBootstrap:CenterTextonProgressBar【发布时间】：2012-10-0721:31:45【问题描述】：我一直在使用Twitter的引导程序，我希望进度条上的文本以on栏为中心，无论值如何。下面的链接是我现... 查看详情

如何在没有 Jquery-ui 且没有 Bootstrap 的情况下在 angularjs 中创建自定义进度条？

】如何在没有Jquery-ui且没有Bootstrap的情况下在angularjs中创建自定义进度条？【英文标题】：HowtocreatecustomprogressbarinangularjsWithoutJquery-uiandwithoutBoostrap?【发布时间】：2017-07-2007:07:37【问题描述】：我正在尝试在Angularjs中创建进度条... 查看详情

Angular UI Bootstrap - 模态不会在第一次点击时弹出

】AngularUIBootstrap-模态不会在第一次点击时弹出【英文标题】：AngularUIBootstrap-modaldoesn\'tpoponthefirstclick【发布时间】：2013-05-1802:38:04【问题描述】：我正在尝试为登录/注册表单制作一个模式，并想做一些可重复使用的东西，我遇... 查看详情

深入理解bootstrap--进度条（progressbar）14

1、进度条在网页中，进度条的效果并不少见，比如一个评分系统，比如加载状态等。就如下图所示的一个评分系统，他就是一个简单的进度条效果：进度条和其他独立组件一样，开发者可以根据自己的需... 查看详情

进度条

  今天学习了一下进度条，bootstrap、html5进度条，看了一下都不错，优点分明bootstrap兼容性强、美观、样式多，html5兼容性不行，但简小。不过这两者都一个缺点是体验感不强，所有我使用了三种方法写了进度条。自定义... 查看详情

bootstrap动画进度条

创建一个动画的进度条的步骤如下：添加一个带有class .progress 和 .progress-striped 的<div>。同时添加class .active。接着，在上面的<div>内，添加一个带有class .progress-bar 的空的<div>。添加一个带... 查看详情

Bootstrap 4 进度条未显示

】Bootstrap4进度条未显示【英文标题】：Bootstrap4progressbarisnotshowingup【发布时间】：2018-08-0500:50:12【问题描述】：我正在制作一张桌子。有几列需要一个进度条，每边都有一个标签列。我使用React将它作为一个组件生成，这会产生... 查看详情

Angular - 材质：进度条自定义颜色？

】Angular-材质：进度条自定义颜色？【英文标题】：Angular-Material:Progressbarcustomcolor?【发布时间】：2018-07-2921:49:34【问题描述】：我现在尝试了几个小时。我使用Material2，只是想更改进度条的颜色。我知道有这些主题（主要/重音/... 查看详情

react-bootstrap 的进度条未显示

】react-bootstrap的进度条未显示【英文标题】：Progressbarwithreact-bootstrapisnotshowingup【发布时间】：2020-10-2920:38:30【问题描述】：我正在尝试添加一个用作评论的进度条，这真的很奇怪，因为没有显示任何内容。我尝试从react-bootstrap... 查看详情

bootstrap警告进度条列表组

 摘要：该部分包括警告、进度条等部分。1.警告（alert）1.1基本的警告（.alert）警告的基类是.alert 。和其他样式类一块使用。例如:.alert-success、.alert-info、.alert-danger、.alert-warning.代码示例：1<divclass="alertalert-success">成... 查看详情

如何使用 Laravel 样式中的 $percentage 变量值更改 Bootstrap 进度条宽度？

】如何使用Laravel样式中的$percentage变量值更改Bootstrap进度条宽度？【英文标题】：HowtochangeBootstrapprogressbarwidthwith$percentagevariablevalueinstyleLaravel?如何使用Laravel样式中的$percentage变量值更改Bootstrap进度条宽度？【发布时间】：2020-10-... 查看详情

angular中对echarts图表进行封装（环形进度条、双y轴折线区域图）

参考技术A在大屏的开发过程中，需要大量的使用echarts图表，我们可以腾出时间将echarts图表进行二次封装，以便后期循环使用。封装为公共组件，在使用的时候只需要传入option项即可这个文件将你所有图表的配置项写成key-value的... 查看详情