Question

我一直在尝试使用我以前使用过的强大的bootstrap库的进度条动画，它与Angular 1配合得很好，但遗憾的是没有使用Angular 2。

My Angular 2 HTML：

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  aria-valuenow="{{enemy.HP}}" aria-valuemin="0" aria-valuemax="{{enemy.HP}}" style="width:{{(enemy.HP/100)*100}}%">
      {{enemy.HP}} HP
  </div>
</div>

导致此错误：

EXCEPTION: Template parse errors:
Can't bind to 'aria-valuenow' since it isn't a known native property ("iv class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  [ERROR ->]aria-valuenow="{{enemy.HP}}" aria-valuemin="0" aria-valuemax="{{enemy.HP}}" style="width:{{(enemy.HP/"): AppComponent@22:2
Can't bind to 'aria-valuemax' since it isn't a known native property ("r progress-bar-striped active" role="progressbar"
  aria-valuenow="{{enemy.HP}}" aria-valuemin="0" [ERROR ->]aria-valuemax="{{enemy.HP}}" style="width:{{(enemy.HP/100)*100}}%">
      {{enemy.HP}} HP
  </div>
"): AppComponent@22:49

如果有人可以分享使用bootstrap进度条的替代方法，我将不胜感激。谢谢！

Answer 1

aria-valuenow等属性的绑定应该类似于[attr.aria-valuenow]（请参阅Angular 2 docs: Attribute, class, and style bindings中的更多详细信息）。双花括号也会消失。

width属性中的style应该看起来像[style.width]（详情Angular 2 docs: NgStyle）

因此，您的代码段将如下所示：

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
  [attr.aria-valuenow]="enemy.HP" aria-valuemin="0" [attr.aria-valuemax]="enemy.HP" [style.width]="(enemy.HP/100)*100 + '%'">
      {{enemy.HP}} HP
  </div>
</div>

Answer 2

您可以使用ng2-bootstrap及其进度条组件。请参阅相应的文档：

http://valor-software.com/ng2-bootstrap/。

以下是文档中的示例：

<div class="row">
  <div class="col-sm-4">
    <progressbar value="55"></progressbar>
  </div>
  <div class="col-sm-4">
    <progressbar class="progress-striped" value="22" 
                 type="warning">22%</progressbar>
  </div>
  <div class="col-sm-4">
    <progressbar class="progress-striped active"
                 max="200" value="166" type="danger"><i>166 / 200</i>
    </progressbar>
  </div>
</div>

Angular 2带有bootstrap JS

2 个答案: