Bootstrap 进度条 angular 4

Question

我是 angular 的新手，我无法理解如何将 bootstrap 进度条与 Angular 一起使用。

下面是 bootstrap 文档

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

我正在尝试使用 angular 获得上述结果。宽度 % 存储在变量 {{capacity.available}}

所以我正在执行以下操作，但没有给我预期的结果。

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

控制台中的警告消息如下所示 正在清理不安全的样式值 width:54

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

提前感谢您的帮助

Answer 1

替换

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

用这个（以 angular 方式完成）

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

Answer 2

还可以设置；

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

Answer 3

尝试用这个制作带有标签（值）的进度条，

<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

Bootstrap 进度条 angular 4

Bootstrap progress bar with angular 4

twitter-bootstrap

progress-bar

angular