Progressbar不工作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实现时，我面临着上述问题。同样的事情，我可以用普通的bootstrap和一些angular 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;
}