使用Angular的堆疊引導進度條？

引導4和早期版本允許在進度條堆疊多個酒吧，在https://v4-alpha.getbootstrap.com/components/progress/所示的代碼：使用Angular的堆疊引導進度條？

<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-引導似乎只允許一個巴NgbProgressbar截至https://ng-bootstrap.github.io/#/components/progressbar所示的代碼：

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

我看到https://embed.plnkr.co/rx4RJUFjHqGYMA3jRxDL/一些代碼，使用引導3和角2 beta版堆疊進度條，但它使用過時的呼叫如CORE_DIRECTIVES，當我試圖在沒有這一點，在運行代碼Angul ar 4/Bootstrap 4環境的輸出相當不穩。

任何人都知道在Bootstrap 4中獲取Angular 4中堆疊進度條的好方法嗎？

來源

2017-06-13 Mickey Segal

我遇到了同樣的問題。我通過將進度條包裝在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>

來源

2018-03-08 13:29:16

使用Angular的堆疊引導進度條？

回答

相關問題