如何更新Bootstrap进度条。

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:%。

- Roka545

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

。

- Alexander Kravets

---

我花了15分钟才意识到它是如何显示0％以及为什么即使整个文本都是0％完成，它仍然只显示0％。 - Shashank Bhatt

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>

- LivingRobot

---

当我使用你的代码片段时，出现了错误：错误：未捕获（在承诺中）：TypeError：无法将属性'endSourceSpan'设置为null。 - Roka545