Как динамически изменить индикатор выполнения в Angular, Boostrap

Получил объект 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>

ТС:

@Input()
  word!: Word;

  totalAnswers!: number;

  ngOnInit(): void {
    this.totalAnswers = this.word.correctAnswers + this.word.wrongAnswers;
  }

Пока не повезло. Пробовал разные способы в соответствии с информацией, которую я нашел, как вы можете видеть выше. На данный момент зеленая полоса вообще не отображается, а красная полоса остается на фиксированных 20 процентах. Когда я пытаюсь изменить его style.width, он тоже исчезает.

angular bootstrap-5

04.04.2023 09:50

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Angular и React для вашего проекта веб-разработки?

Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...

Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf

Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.

Угловой продивер

Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.

Мое недавнее углубление в Angular

Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...

Освоение Observables и Subjects в Rxjs:

Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular

110

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Рассчитайте процент (желательно создать отдельную переменную в компоненте), а затем установите ее как ширину с помощью обозначения [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>

О боже, это должно было быть в процентах. Большое спасибо.

— 04.04.2023 14:20

04.04.2023 10:23

<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>

Зеленая полоса не отображается в приведенном выше коде, потому что word.correctAnswers, который использовался для привязки к style.width, не имеет строкового значения со знаком процента, например 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>

Теперь будет отображаться зеленая полоса в зависимости от предоставленной ширины.

04.04.2023 10:26