角度模板解析错误，无法绑定属性答案

【问题标题】：Angular template parse error, cant bind property角度模板解析错误，无法绑定属性
【发布时间】：2019-10-23 15:55:29
【问题描述】：

在尝试从角度开始时弄清楚组件时，我试图制作一个引导滑块组件。我希望能够创建一个可以将我的数据绑定到的滑块（并在设置之前检查它不超过最大值）。但是尝试执行下面的代码时遇到了一个问题，它告诉我提供的值无法映射

HTML

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

组件.html

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

组件.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

【问题讨论】：

Can't bind to 'aria-valuenow' since it isn't a known property of 'div'的可能重复
是的，我看到了那个帖子。然而，由于它已经 3 岁了，而且我正在使用不同版本的 Angular，我认为它可能会有所不同。
可以，但你试过了吗？
我很密集，我没有。虽然我确实想知道“attr”指的是什么。如果我把它放在那里就可以了。
这是一种在 DOM 元素上放置属性的冗长方式。使用 some，您可以只使用 []，例如：[disabled]="someCondition"，但 [attr.attributeName]= 在一般情况下应该可以工作。

标签： html angular bootstrap-4

【解决方案1】：

我认为问题出在这里：

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

正如您在Angular docs for Template Syntax 中看到的那样，要绑定数据，您只需将括号放在属性上，并且将属性和值都括起来。所以你的代码会这样结束：

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

【讨论】：