twitter-bootstrap 带角度 4 的 Bootstrap 进度条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44019736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap progress bar with angular 4
提问by Ankit
I am new to angular and i am unable to understand how to use bootstrap progress bar with Angular.
我是 angular 的新手，我无法理解如何在 Angular 中使用引导进度条。
Below is the bootstrap documentation
以下是引导程序文档
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>I am trying to get the above result using angular. The width % is stored in a variable {{capacity.available}}
我正在尝试使用 angular 获得上述结果。宽度 % 存储在变量 {{capacity.available}} 中
So i am doing the following but its not giving me the expected result.
所以我正在做以下但它没有给我预期的结果。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:{{capacity.available}}">
60%
</div>
</div>Warning message in the console looks like sanitizing unsafe style value width:54
控制台中的警告消息看起来像 清理不安全的样式值宽度：54
What am i doing wrong? Any suggestions on how this can be done?
我究竟做错了什么？关于如何做到这一点的任何建议？
Thank you for any help in advance
提前感谢您的任何帮助
回答by mankers
Replace
代替
style="width:{{capacity.available}}%"
with this (done in angular way)
用这个（以角度方式完成）
[style.width]="capacity.available + '%'"
回答by Günay Gültekin
You can also set;
你也可以设置；
[ngStyle]="{width: capacity.available + '%'}"
回答by Lakshan
try with this for progress bar with label (value),
尝试使用带有标签（值）的进度条，
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{capacity.available}}" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{width: capacity.available + '%'}">
{{capacity.available}}%
</div>
</div>
Example,
例子，
capacity.available = 14
