进度条不起作用 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;
}