属性绑定[class.selected]中的属性是什么？

我从official hero tutorial正在学习角2。属性绑定[class.selected]中的属性是什么？

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

我读过有关属性绑定here指导，但还是没能明白下面的代码：

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

问题1： 我知道的HTML标签有一个类的属性，但是类属性没有称为“选定”的键。类属性可能有一个值，它是字符串“selected”。为什么这个属性绑定是有效的？

问题2： 上述属性绑定如何转换为class =“selected”？

来源

2016-09-28 Nicolas S.Xu

该教程令人困惑。它应该被归类为“类绑定”，而不是“属性绑定”。你可以在这里了解更多关于类绑定的内容：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#class-binding –

[class.xxx]和[style.xxx.yy]特殊Angular2结合语法，其中

[class.my-class]="expression"

添加（或删除）的CSS类my-class至（或从）元件根据是否expression导致true或false

[style.width.px]="numExpression"

设置width（或任何其他有效的样式属性）to the value of num表达式and the unit px`（或任何其他有效的CSS单元）

来源

2016-09-28 05:09:37

这个关于Harry Ninh提出的类绑定的指南将填充我的gap：https://angular.io/docs/ts/latest/guide/template-syntax.html#!#class-binding –

这里的区别在于class与HTML元素无关，它是一个角度绑定。您将Angular的class对象的selected属性绑定到表达式，该表达式将在删除或添加属性（如果为true/false）。

该属性绑定到class="selected"，因为当您单击li元素时，用于点击的事件处理程序设置英雄，并且它们匹配。

来源

2016-09-28 02:44:30

属性绑定[class.selected]中的属性是什么？

回答

相关问题