angular - 属性绑定(bind) [class.selected] 中的属性是什么？

Question

我正在从 official hero tutorial 学习 Angular 2 .

<ul class="heroes">
      <li *ngFor="let hero of heroes"
        [class.selected]="hero === selectedHero"
        (click)="onSelect(hero)">
        <span class="badge">{{hero.id}}</span> {{hero.name}}
      </li>
</ul>

我已阅读有关属性绑定(bind)的指南 here , 但仍然无法理解以下代码:

[class.selected]="hero === selectedHero"

问题 1: 我知道 html 标签有一个类属性，但类属性没有一个名为“selected”的键。类属性可能有一个值，它是字符串“selected”。为什么这个属性绑定(bind)是有效的？

问题 2: 上述属性绑定(bind)如何转换为 class="selected"？

Answer 1

[class.xxx] 和 [style.xxx.yy] 是特殊的 Angular2 绑定(bind)语法，其中

[class.my-class]="expression"

根据 expression 是否导致 true 或从元素添加(或删除)CSS 类 my-class 错误

[style.width.px]="numExpression"

将宽度(或任何其他有效的样式属性)设置为numExpression的值和单位px`(或任何其他有效的CSS 单位)