twitter-bootstrap – 带有bootstrap JS的Angular 2

发布时间：2020-12-17 20:38:56 所属栏目：安全来源：网络整理

导读：我一直在尝试使用我曾经使用的强大的bootstrap库的进度条动画,它与Angular 1配合得很好,但遗憾的是没有使用Angular 2. 我的Angular 2 HTML： div class="progress" div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow=

我一直在尝试使用我曾经使用的强大的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进度条的替代方法,我将不胜感激.谢谢！

解决方法

您可以使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!