javascript - 更新上传文件 Angular 2 上的引导进度条

Question

我想在用户上传文件时显示进度条的进度，根据this question 。这是我的代码:

服务:

public makeFileRequest(url: string, files: File): Observable<Models.MalFile> {

    return  Observable.create ((Observable) => {
        var formData: any = new FormData();
        var xhr = new XMLHttpRequest();
        console.log(files[0]);

        // for(var i = 0; i < files.length; i++) {
             formData.append("file", files[0], files[0].name);
        // }
        xhr.onreadystatechange =  () => {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    Observable.next(JSON.parse(xhr.response));
                    Observable.complete();
                } else {
                    Observable.error(xhr.response);
                    alert(xhr.response);
                }
            }
        }
        xhr.upload.onprogress = (event) => {
          this.progress = Math.round( event.loaded / event.total * 100);
          this.progressObserver.next(this.progress);
        }
        xhr.open("POST", url, true);
        xhr.send(formData);
    });
}

和我的组件:

ngOnInit() {

this.service.progress.subscribe(
  data => {
    this.loadedData = data;
    console.log("data:",this.loadedData);
    //this.loadedData.bind(data)  ;
  },
  (error) => {
    console.log('Could not to upload file');

  },

  () => {
    // this.loadedData = 100;
  }

)}

我想将 loadedData 绑定(bind)到进度条 View ，但此时我在控制台中记录进度:

upload log screen shot

我的问题是:

将 Observable 对象绑定(bind)到 View 中的进度条值:

              <div class="progress" style="">
                <progress dir="ltr" class="progress progress-success active progress-striped progress-animated" value="{{loadedData}}" max="100">  </progress>
              </div>

此代码仅在上传完成(100%)时显示进度条!

如何将 loadedData 绑定(bind)到进度条值？

Answer 1

我假设 this.loadedData 获取了您想要的正确数据。然后执行以下操作，

<div class="progress" style="">
     <progress dir="ltr" 
               class="progress progress-success active progress-striped progress-animated" 
               value="loadedData"      //<<<===removed {{ }} curly braces.
               max="100">  
      </progress> 
</div>