ブートストラップ進行状況バーを更新する方法。

Question

ブートストラップの進行状況バーのドキュメントは、デフォルト値と補完値でプログレスバーを表示する方法を示していますが、今アップデートする方法は？だから、値と幅を更新するための最も簡単な方法は何ですか？

これは、ファイルhome.htmlの私のプログレスバーです：テキストがどんなtrainingProgressに変更されます

public trainingProgress: number = 10; 

さ：

<div class="progress"> 
    <div id="trainingProgressBar" class="progress-bar 
     progress-bar-success progress-bar-striped active" 
     role="progressbar" 
     aria-valuenow="40" aria-valuemin="0" 
     aria-valuemax="100" style="width:40%"> 
     {{trainingProgress}}% Complete 
    </div> 
</div> 

と私home.tsで、私は私のtrainingProgress値を宣言ファイルtrainingProgressはaria-valuenowとwidth:%にリンクされていないため、幅は変更されません。

Answer 1

使用attributeとstyle：

それは次のようになります

<div class="progress"> 
    <div id="trainingProgressBar" class="progress-bar 
     progress-bar-success progress-bar-striped active" 
     role="progressbar" 
     aria-valuemin="0" 
     aria-valuemax="100" 
     [attr.aria-valuenow]="trainingProgress" 
     [style.width.%]="trainingProgress"> 
     {{trainingProgress}}% Complete 
    </div> 
</div> 

ここ

私はあなたのコードスニペットを使用する場合PLUNKER

Answer 2

htmlのstyleタグを使用してtrainingProgressに幅を設定する必要があります。結合

<div class="progress"> 
    <div id="trainingProgressBar" class="progress-bar 
     progress-bar-success progress-bar-striped active" 
     role="progressbar" 
     aria-valuemin="0" 
     aria-valuemax="100" style={{'width': trainingProgress + '%'}}> 
     {{trainingProgress}}% Complete 
    </div> 
</div>