屬性綁定[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]中的屬性是什麼？

回答

相關問題