Изменение динамических атрибутов для Bootstrap Progress-Bar в Angular 5

Question

У меня есть следующий код, и я хочу 2 вещи:

1. Изменение цвета полосы в зависимости от вывода verifyDifficulty(text1) ( возвращает длину введенного текста- высмеивает сложность пароля )

   a.если verifyDifficulty(text1)<=3, то цвет бара = красный (прогресс-легкий в css)
   b.если verifyDifficulty(text1)>3 && verifyDifficulty(text1)<=6, то цвет столбца = желтый (средний прогресс в css)
   c.если verifyDifficulty(text1)>6 && verifyDifficulty(text1)<=9, то цвет столбца = светло-зеленый (прогресс в css)
   d.если verifyDifficulty(text1)==10 then bar color=dark green (очень трудный прогресс в css)

2. изменить значение aria-valuenow на verifyDifficulty(text1)*10, но когда я пытаюсь выполнить привязку свойства, я получаю эту ошибку: Невозможно связать с 'aria-valuenow', поскольку оно не является известным свойством 'div'

My .ts :

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
  text1 = '';

  verifyDifficulty(text) {
    const result = text.length;
    return result;
  }
}

My .html :

<hello name="{{ name }}"></hello>
<div class="pb-1">
  <input [(ngModel)]="text1" maxlength="10" placeholder="Text">
</div>
<p>{{verifyDifficulty(text1)}}</p>
<div  *ngIf="verifyDifficulty(text1)<=3" class="progress">
  <div class="progress-bar progress-easy" role="progressbar" aria-valuenow="60" aria-valuemin="0"
    aria-valuemax="100" [style.width]="verifyDifficulty(text1)*10+'%'">
    {{verifyDifficulty(text1)*10}}
  </div>
</div>

My .css :

p {
  font-family: Lato;
}

.progress-bar.progress-easy{
  background-color: #fd0801;
}

.progress-bar.progress-medium{
  background-color: #c1b706;
}

.progress-bar.progress-hard{
  background-color: #8bdb06;
}

.progress-bar.progress-very-hard{
  background-color: #00b006;
}

Демонстрационная версия этого кода здесь

Answer 1

Все ваши CSS могут быть обработаны с помощью ngClass.ngClass позволяет вам применять стили к элементу на основе условий, поэтому вы можете сделать что-то вроде следующего для вашего индикатора выполнения:

<div class="progress-bar progress-easy" 
     role="progressbar" 
     aria-valuenow="60" 
     aria-valuemin="0"
     aria-valuemax="100"
     [style.width]="verifyDifficulty(text1)*10+'%'"
     [ngClass]="{
        'progress-easy' : verifyDifficulty(text1)<=3,
        'progress-medium' : verifyDifficulty(text1)>3 && verifyDifficulty(text1)<=6,
        'progress-hard' : verifyDifficulty(text1)>6 && verifyDifficulty(text1)<=9,
        'progress-very-hard' :  verifyDifficulty(text1)==10
     }">
     {{verifyDifficulty(text1)*10}}
</div>

Хотя, чтобы сохранить ваш шаблон чистым, я мог бы применить [ngClass] сфункция, а не сырые условия в вашем шаблоне.Например,

<div class="progress-bar progress-easy" 
     role="progressbar" 
     aria-valuenow="60" 
     aria-valuemin="0"
     aria-valuemax="100"
     [style.width]="verifyDifficulty(text1)*10+'%'"
     [ngClass]="getStyleClass(text1)">
     {{verifyDifficulty(text1)*10}}
</div>

Где getStyleClass(text1) - это функция в вашем компоненте, которая возвращает класс на основе входных данных.

Теперь, для вашей проблемы aria, сначала примените атрибут вAngular, вы используете привязку attr, как уже упоминалось, поэтому в вашем случае:

[attr.aria-valuenow]="whatever"

Альтернативой, а возможно и лучше, в зависимости от вашей школы мысли, является использование Renderer2 для примененияАрия динамически, как таковая, вам нужно внедрить ее в ваш компонент, и сделать ваш индикатор выполнения ViewChild.

@ViewChild('progressBar') progressBar: ElementRef;

constructor(private renderer2: Renderer2) { }

Теперь ваш шаблон становится:

<div #progressBar class="progress-bar progress-easy" 
     role="progressbar" 
     aria-valuenow="60" 
     aria-valuemin="0"
     aria-valuemax="100"
     [style.width]="verifyDifficulty(text1)*10+'%'"
     [ngClass]="getStyleClass(text1)">
     {{verifyDifficulty(text1)*10}}
</div>

Примечаниедобавления #progressBar - это помечает элемент как viewchild, по этой ссылке.

Теперь, когда вам нужно изменить значение арии, вы можете сделать это динамически с помощью:

this.renderer2.setAttribute(this.progressBar.nativeElement, 'aria-valuenow', 'whatever value');

Работа хороша!??

Answer 2

Попробуйте использовать

attr.aria-valuenow="60"

или

[attr.aria-valuenow]="60"