带角4的Bootstrap进度条

Question

我是角度新手,我无法理解如何使用Angular的bootstrap进度条.

以下是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>

我试图使用角度获得上述结果.宽度%存储在变量{{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>

控制台中的警告消息类似于 清理不安全的样式值宽度:54

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

感谢您提前提供的任何帮助

Answer 1

更换

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

用这个(以角度方式完成)

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