Question

Bootstrap 4及更早版本允许在进度条中堆叠多个条形，如https://v4-alpha.getbootstrap.com/components/progress/所示，代码为：

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

但是，ng-bootstrap似乎只允许一个NgbProgressbar栏，如https://ng-bootstrap.github.io/#/components/progressbar所示代码：

<p><ngb-progressbar type="success" [value]="25"></ngb-progressbar></p>

我在https://embed.plnkr.co/rx4RJUFjHqGYMA3jRxDL/看到了使用Bootstrap 3和测试版Angular 2的堆叠进度条的一些代码，但它使用了弃用的调用，例如CORE_DIRECTIVES，当我尝试运行没有它的代码时Angular 4 / Bootstrap 4环境输出严重损坏。

任何人都知道使用Bootstrap 4在Angular 4中获得堆积进度条的好方法吗？

Answer 1

我遇到了同样的问题。我通过在div标记中包装进度条，并设置这些div标记的宽度，然后将进度条设置为100％来修复它。像这样：

<div *ngFor="let player of Players" [ngStyle]="{width: (100/Players.length).toString() + '%'}" class="float-left">
    <ngb-progressbar type="success" [value]="100">{{100/Players.length}}</ngb-progressbar>
</div>

Answer 2

如果需要的话（根据需要使用flex-layout-style样式的纯角度进度栏）

    <div fxLayout="row" class="custom-progressbar">
                                      <div fxFlex="15" class="stat-bar bar-fail" matTooltipPosition="above" matTooltip="fail"></div>
                                      <div fxFlex="30" class="stat-bar bar-pass" matTooltipPosition="above" matTooltip="pass"></div>
                                      <div fxFlex="20" class="stat-bar bar-inprogress" matTooltipPosition="above" matTooltip="inprogress"></div>
                                      <div fxFlex="30" class="stat-bar bar-expire" matTooltipPosition="above" matTooltip="expire"></div>
                                      <div fxFlex="5" class="stat-bar bar-expiring" matTooltipPosition="above" matTooltip="expiring"></div>
 </div>

//CSS
    .bar-fail {
    background: mat-color($mat-red, 500);
  }

  .bar-pass {
    background: mat-color($mat-green, 500);
  }

  .bar-inprogress {
    background: mat-color($mat-blue, 500);
  }

  .bar-expire {
    background: mat-color($mat-amber, 500);
  }

  .bar-expiring {
    background: mat-color($mat-orange, 500);
  }
.custom-progressbar {
  width: 206px;
  height: 14px;
  margin-left: 16px;
  background: mat-color($mat-grey, A100);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid mat-color($mat-lgrey, 500);
  align-items: center;}

堆叠的bootstrap进度条使用Angular？

2 个答案: