Angular 2带有bootstrap JS

Question

我一直在尝试使用我曾经使用的强大的bootstrap库的进度条动画,它与Angular 1配合得很好,但遗憾的是没有使用Angular 2.

我的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文档中的更多详细信息:属性,类和样式绑定).双花括号也会消失.

将width在style属性应该像[style.width](细节角2个文档: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>