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

控制台中的警告信息看起来像是 清理不安全的样式值 width:54

我做错什么了吗？有什么建议可以解决吗？

提前感谢您的任何帮助。

- Ankit

---

capacity.available 中存储的是什么类型？是字符串 "60%" 还是数字 60？ - mankers

它被存储为数字。 我的类结构如下： class Capacity { total: number; available: number; } - Ankit

这是你的问题，你忘记了%。 这应该有所帮助：style="width:{{capacity.available}}%" - mankers

尝试使用百分号时，控制台上出现了相同的警告。。清理不安全的样式值width:54% - Ankit

好的，尝试用Angular的方式替换它：[style.width]="capacity.available + '%'" - mankers

Answer 1

更换

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

用Angular的方式实现（以此完成）

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

- mankers

Answer 2

你也可以进行以下设置；

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

- Günay Gültekin

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

- Lakshan