繁体   English   中英

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

[英]Progressbar not working ngx-bootstrap

我发现了进度条的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> 

但是,这并没有给我带来成功与危险并存的进步标准。 我做错什么了吗?

是的,您只应一次显示一种进度条就给一个值。

尝试这个:

<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更改值和类型,而是取决于其他操作。

谢谢大家的回应。 我试图在同一进度栏中显示多个进度。 因此,当我尝试使用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> 

ngx-bootstrap@2.0.2的最新版本存在此问题。 此问题将在下一版本中修复,或者您现在可以使用自定义css修复:

progressbar.progress {
    display: flex;
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM