带角4的Bootstrap进度条

Question

我是角色新手，我无法理解如何使用Angular的bootstrap进度条。

以下是引导程序文档

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我试图使用角度来获得上述结果。宽度％存储在变量{{capacity.available}}

中

所以我正在做以下事情，但它没有给我预期的结果。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

控制台中的警告消息如下所示 清理不安全的样式值宽度：54

我做错了什么？关于如何做到这一点的任何建议？

感谢您提前提供任何帮助

Answer 1

替换

style="width:{{capacity.available}}%"

这个（以有角度的方式完成）

[style.width]="capacity.available + '%'"

Answer 2

尝试使用带有标签（值）的进度条，

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

示例

capacity.available = 14

Answer 3

您还可以设置；

[ngStyle]="{width: capacity.available + '%'}"