如何更新引导进度条。

Posted 2023-03-05

【中文标题】如何更新引导进度条。

【英文标题】：How to update bootstrap progress bar.

【发布时间】：2016-11-22 16:23:07

【问题描述】：

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

这是我在 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:%。

【参考方案1】：

您需要在 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>

【讨论】：

当我使用你的代码 sn-p 时，我得到错误：错误：未捕获（承诺）：TypeError：无法设置属性 'endSourceSpan' of null。

【参考方案2】：

使用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