如何在Angular中动态改变进度条，Boostrap

Question

得到一个Word对象(用于语言词汇训练应用程序)，其中包含正确和错误答案的数量。试图显示一个进度条，其中将包含有关此答案的信息。

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" [style.width]="word.correctAnswers" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0" [attr.aria-valuemax]="totalAnswers"></div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" style="width: 20%" attr.aria-valuenow="{{word.wrongAnswers}}" aria-valuemin="0" attr.aria-valuemax="{{totalAnswers}}"></div>
</div>

ts:

@Input()
word!: Word;
totalAnswers!: number;
ngOnInit(): void {
this.totalAnswers = this.word.correctAnswers + this.word.wrongAnswers;
}

到目前为止还没找到。正如你在上面看到的，根据我发现的信息，我一直在尝试不同的方法。目前根本没有绿色条显示，红色条保持在固定的20%。当我试图改变它的风格。宽度，它也消失了。

Answer 1

计算百分比(最好在组件中创建单独的变量)，然后将其设置为宽度，并使用[style.width.%]符号

试试这个:

<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" [style.width.%]="(100 * word.correctAnswers)/totalAnswers" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0" [attr.aria-valuemax]="totalAnswers"></div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" [style.width.%]="(100 * word.wrongAnswers)/totalAnswers" attr.aria-valuenow="{{word.wrongAnswers}}" aria-valuemin="0" attr.aria-valuemax="{{totalAnswers}}"></div>
</div>

或组件中的变量:

totalAnswers!: number;
correctPercentage!: number;
wrongPercentage!: number;
ngOnInit(): void {
this.totalAnswers = this.word.correctAnswers + this.word.wrongAnswers;
this.correctPercentage = (100 * this.word.correctAnswers)/this.totalAnswers;
this.wrongPercentage = (100 * this.word.wrongAnswers)/this.totalAnswers;
}
<!-->
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" [style.width.%]="correctPercentage" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0" [attr.aria-valuemax]="totalAnswers"></div>
<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" [style.width.%]="wrongPercentage" attr.aria-valuenow="{{word.wrongAnswers}}" aria-valuemin="0" attr.aria-valuemax="{{totalAnswers}}"></div>
</div>

Answer 2

<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" [style.width]="word.correctAnswers" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0" [attr.aria-valuemax]="totalAnswers"></div>

上面的代码没有显示绿色条，因为单词。用于绑定到样式的correctAnswers。宽度没有带有百分比符号的字符串值，如2%或25%。我猜上面只有号码。所以你可以在下面添加%符号。

<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
[style.width]="word.correctAnswers + '%'" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0"
[attr.aria-valuemax]="totalAnswers"></div>

或者使用[style.width.%]绑定

<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"
[style.width.%]="word.correctAnswers" [attr.aria-valuenow]="word.correctAnswers" aria-valuemin="0"
[attr.aria-valuemax]="totalAnswers"></div>

现在将根据所提供的宽度显示绿条。