如何更新引导程序进度条。

Question

bootstrap 进度条的文档说明了如何使用默认值和完成值显示进度条，但现在如何更新它？那么，更新值和宽度的最简单方法是什么？

这是我在文件 home.html 中的进度条：

<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 值：

public trainingProgress: number = 10;

文本将更改为任何 trainingProgress，但宽度不会更改，因为 trainingProgress 未链接到aria-valuenow和width:%。

Answer 1

使用属性和样式绑定：

<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