アップロードファイルのブートストラップ進捗バーを更新します。角度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をバインドしたいのですが、この時点で私は、コンソールでの進捗状況をログ：

upload log screen shot

私の問題は次のとおりです。ビューのバーの値を進行するために観察可能なオブジェクトを結合

：

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

このコードの完成をアップロードするときだけ（100％）プログレスバーを表示します！

loadedDataをプログレスバーの値にバインドするにはどうすればよいですか？

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>