angular - 绑定(bind)到进度条

Question

知道如何在 Angular2 中将数据绑定(bind)到进度条吗？ {{}} 不适用于 aria-valuenow 或进度标记值等现有属性。下面是 Bootstrap 。

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

更新更多详细信息

update.service.ts:这是为了创建可观察的，

  public _progress$: Observable<number>;
  private _progress: number = 0;
  private _progressObserver: Observer<number>;
  constructor(private _http:Http, private _configurationService: ConfigurationService,private _authenservice:AuthenticationService) {
    this._progress$ = new Observable(observer => {
      this._progressObserver = observer
    });
  }
....
this._progressObserver.next(this._progress); // this is to push in the progress number from xhr.upload.onprogress

home.component.ts:显示进度条的组件，

  private  _uploadProgressStatus:Observable<number>;// as "asyn" only takes in the promise of observable, I plan to feed _uploadProgressStatus in

  constructor(private _videoManagementService:VideoManagementService,
              private _uploadService:UploadService) {
    console.info('HomeComponent  Mounted Successfully');
    this._uploadProgressStatus = this._uploadService._progress$; 
 this._uploadProgressStatus.subscribe(
  data => {
    console.log('progress = '+data/100);
  }); //if subscribe to this._uploadProgressStatus, no values are received...
this._uploadService._progress$.subscribe(
  data => {
    console.log('progress = '+data/100);
  });
  } // if subscribe to this._uploadService._progress$ ,numbers are received.

home.component.html

  <h4>Uploading...{{ _uploadProgressStatus | async | percent}}</h4>
  <div class="progress">
    <div class="progress-bar" role="progressbar" [style.width]="_uploadProgressStatus | async | percent" aria-valuemin="0" aria-valuemax="100">
      <h4>{{ _uploadProgressStatus | async | percent}} </h4>
    </div>
  </div>

这不起作用。所以问题是如何在 home.component.ts 中创建 observable 来接收数字？

在 html 中将 _uploadProgressStatus 更新为 _uploadService._progress$ 也不起作用

Answer 1

    var myVar = setInterval(myTimer, 200);
    var a=1;
    function myTimer() {
      a++;
      if(a>=99){a=1;}
      document.getElementById("progress-bar").style.width = a+"%";
      document.getElementById("demo").innerHTML = a+"% Complete";
    }


   function myStopFunction() {
    clearTimeout(myVar);
   }
  /* function myStartFunction() {
    myVar = setInterval(myTimer, 200);
   }*/

    #progress-bar{
    background-color:#00CC00;
    }

   <div class="progress">
      <div class="progress-bar" style="width:70%" id="progress-bar">
        <span id="demo">70% Complete</span>
        
      </div>
    </div>
<button onclick="myStopFunction()">Stop</button>

<!--<button onclick="myStartFunction()">Start</button>-->