twitter-bootstrap - 带 Angular 4 的 Bootstrap 进度条

Question

我是 Angular 的新手，我无法理解如何在 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>

我正在尝试使用 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>

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

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

提前感谢您的帮助

Answer 1

替换

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

用这个(以 Angular 方式完成)

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