进度栏无法正常工作ngx-bootstrap

Question

I found following description for value attribute of progress-bar. Current value of progress-bar, could be a number or array of objects like {"value":15,"type":"info","label":"15 %"}

While using it I passed the value as:

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

But, it is not giving me a progress-bar with success and danger together. Am I doing something wrong please guide?

Answer 1

Yes, you're only supposed to give one value at a time for one type of progress-bar to be shown.

Try this:

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

Then on the component:

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

You're not changing the value and type with setTimeout , rather depending on other actions.

Answer 2

Thank's everyone for response. I was trying to show multiple progress in same progressbar. So when I tried to implement using ngx-bootstrap I was facing the above issue. Same thing I am able to do using normal bootstrap and some angular 5 things.

 <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

The latest version of ngx-bootstrap@2.0.2 has this issue. This will be fixed in next releases or you can use custom css fix right now:

progressbar.progress {
    display: flex;
}