[英]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.