進度欄無法正常工作ngx-bootstrap

Question

我發現了進度條的value屬性的以下描述。 進度欄的當前值可以是數字或對象數組，例如{"value":15,"type":"info","label":"15 %"}

使用它時，我將值傳遞為：

 <progressbar max="100" [value]="[{'value':15,'type':'success','label':'15 %'}, {'value':15,'type':'danger','label':'15 %'}]" [striped]="true" [animate]="true"><i></i></progressbar> 

但是，這並沒有給我帶來成功與危險並存的進步標准。 我做錯什么了嗎？

Answer 1

是的，您只應一次顯示一種進度條就給一個值。

嘗試這個：

<progressbar max="100" [value]="progressValue" [striped]="true" [animate]="true"><i></i></progressbar>

然后在組件上：

ngOnInit() {
    this.progressValue = {'value':15,'type':'success','label':'15 %'};
    setTimeout(() => this.progressValue = {'value':15,'type':'danger','label':'15 %'}, 3000);

您無需使用setTimeout更改值和類型，而是取決於其他操作。

Answer 2

謝謝大家的回應。 我試圖在同一進度欄中顯示多個進度。 因此，當我嘗試使用ngx-bootstrap實施時，遇到了上述問題。 使用普通的引導程序和一些有角度的5件事，我也可以做同樣的事情。

 <div class="progress"> <div class="progress-bar bg-success progress-bar-animated progress-bar-striped" role="progressbar" [style.width.%]="progress.correctPer" [attr.aria-valuenow]="progress.correctPer" aria-valuemin="0" aria-valuemax="100">{{(progress.correctPer ? (progress.correctPer + '%'):'')}}</div> <div class="progress-bar bg-danger progress-bar-animated progress-bar-striped" role="progressbar" [style.width.%]="progress.wrongPer" [attr.aria-valuenow]="progress.wrongPer" aria-valuemin="0" aria-valuemax="100">{{(progress.wrongPer ? (progress.wrongPer+'%'):'')}}</div> </div> 

Answer 3

ngx-bootstrap@2.0.2的最新版本存在此問題。 此問題將在下一版本中修復，或者您現在可以使用自定義css修復：

progressbar.progress {
    display: flex;
}