使用Angular 2实现Bootstrap进度条

9

我使用Bootstrap来显示进度条。为了改变进度条中的值,我使用Angular 2属性绑定。

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax ="100" 
  style="min-width: 2em;" [style.width]="(progress/100)*100 + '%'">
   {{progress}}%
  </div>

当我上传文件并在控制台日志中看到值时,变量进度将会增加。

this.service.progress.subscribe(
data => {
    console.log('progress = '+data);
    this.progress = data;
    console.log(this.progress) ;
  });

问题:上传进度条会显示0,然后在上传完成时显示100,但不会在中间显示其他值。请建议。

你能否在 Plunker 上重新创建你的问题? - Pardeep Jain
我的代码如下所示,上传过程在以下教程中展示。 https://plnkr.co/edit/Z46QwU?p=preview 上传:https://www.thepolyglotdeveloper.com/2016/02/upload-files-to-node-js-using-angular-2/ - Kiran Kumar
1个回答

2

代码没有问题。由于上传文件的大小非常小,因此上传速度很快。当我上传一个更大的文件时,它按预期工作。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接