Угловая ошибка синтаксического анализа шаблона, свойство не может быть связано

Question

Пытаясь разобраться с компонентами, когда я начинал работать под углом, я пытался создать компонент-слайдер для начальной загрузки. Я хотел иметь возможность создать ползунок, к которому я мог бы привязать свои данные (и проверить, чтобы он не превышал максимальное значение перед установкой). Но пытаясь выполнить приведенный ниже код, я столкнулся с проблемой, из-за которой он сообщает, что указанные значения не могут быть отображены

HTML

<app-percentagebar [valueNow]=25 [valueMin]=0 [valueMax]=100></app-percentagebar>

Component.html

    <div class="progress-bar" role="progressbar" style="width: 25%;" 
    [aria-valuenow]="[valueNow]" [aria-valuemin]="[valueMin]" [aria-valuemax]="[valueMax]"></div>
  </div> 

Component.ts

@Component({
  selector: 'app-percentagebar',
  templateUrl: './percentagebar.component.html',
  styleUrls: ['./percentagebar.component.scss']
})
export class PercentagebarComponent implements OnInit {

  @Input() valueMin: number;
  @Input() valueMax: number;
  @Input() valueNow: number;

  constructor() { }

  ngOnInit() {
  }

}

Uncaught Error: Template parse errors:
Can't bind to 'aria-valuenow' since it isn't a known property of 'div'. ("<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%;" 
    [ERROR ->][aria-valuenow]="[valueNow]" [aria-valuemin]="[valueMin]" [aria-valuemax]="[valueMax]"></div>
  </div"): ng:///AppModule/PercentagebarComponent.html@2:4

Answer 1

Я думаю, что проблема заключается здесь:

<div class="progress-bar" role="progressbar" style="width: 25%;" 
    [aria-valuenow]="[valueNow]" [aria-valuemin]="[valueMin]" [aria-valuemax]="[valueMax]"></div>
  </div> 

Как вы можете видеть в Angular Docs для шаблона Синтаксис , чтобы связать данные, вам нужно только заключить скобки всобственность, и вы окружаете как собственность, так и стоимость. Итак, ваш код закончится так:

<div class="progress-bar" role="progressbar" style="width: 25%;" 
    [attr.aria-valuenow]="valueNow" [attr.aria-valuemin]="valueMin" [attr.aria-valuemax]="valueMax"></div>
  </div>