twitter-bootstrap - 带 Bootstrap JS 的 Angular 2

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 等属性的绑定(bind)应类似于 [attr.aria-valuenow](请参阅 Angular 2 docs: Attribute, class, and style bindings 中的更多详细信息)。双花括号也会消失。

style 属性中的width 应该类似于[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>