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 进度条的替代方法，我将不胜感激。谢谢！

- TheUnreal

Answer 1

类似于aria-valuenow这样的属性绑定应该写成[attr.aria-valuenow]的形式（详见 Angular 2文档：Attribute、class和style绑定）。双花括号也将被移除。

style属性中的width应该写成[style.width]的形式（详见 Angular 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>

- Andrei Zhytkevich

---

这个对我很有效。这是我的模板： <div class="progress"> <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" attr.aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100" [style.width]="percentage + '%'"></div> </div> - minhnguyen

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>

- Thierry Templier

---

我已经查阅过它，但安装起来非常困难，无论如何都会出现 GET http://localhost:3000/ng2-bootstrap 404 (Not Found) 的错误。安装了 npm install --save ng2-bootstrap 之后，添加了这个： import { Ng2BootstrapConfig, Ng2BootstrapTheme, PROGRESSBAR_DIRECTIVES } from '../../../ng2-bootstrap';，并且指令是 directives: [PROGRESSBAR_DIRECTIVES, CORE_DIRECTIVES]。 - TheUnreal

是的，这并不是那么明显。请参考此问题以获取更多详细信息：http://stackoverflow.com/questions/35865644/integrate-bootstrap-module-and-ng2-select-module-to-angular2-5min-quickstart/35866957#35866957。需要在SystemJS中进行一些配置。然后您可以像这样导入组件：`import { Ng2BootstrapConfig, Ng2BootstrapTheme, PROGRESSBAR_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';` - Thierry Templier

我更新了我的SystemJS，但是仍然出现相同的错误。这不是与上面问题中显示的相同错误。我一直在尝试谷歌我的错误，但所有的解决方案都对我无效。 - TheUnreal