Angular2 - 動態添加HTML屬性和類

Question

請幫我找到一個答案，如何動態地添加一個屬性& &類到Angular 2中的HTML模板？

例如：

<div class="some-class class-8" col-8></div> 

8上面的例子中應該來自配置屬性，但是，如果沒有定義特定的屬性，然後同事和類 -不應被注射。

請不要指出，這種類型的屬性是一個錯誤（在Ionic2出現這種情況）

Answer 1

對於動態類，您可以使用此：

<div [ngClass]="{'some-class': true, 'class-8': true}">...</div> 

對於屬性，你可以使用::

<div [attr.col-8]='true' > </div> 

這裏真/假是Boolean值，這樣你就可以設置conditions還添加類/屬性時，一些條件得到滿足。

如果你想通過@input修改山坳號（）

@Input(dynamicVar)dynamicVar:String; 
<div {{ dynamicVar !== '' ? 'col-'+dynamicVar : '' }} > </div> 

Answer 2

即使我把錯誤：[attr.col-12] = '假' 的arribute設置爲標籤。 我使用angular4/ionic3

Answer 3

[attr.col-8]是正確的語法，但條件應返回空字符串（true，屬性設置）或null（false，屬性未設置）。 例如：

[attr.col-6]="field.width == 6 ? '' : null" 

確實工作正常。 （我正在使用離子3）