Angular2 - 動態添加HTML屬性和類

Question

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

例如。：

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

上面示例中的8應該來自配置屬性，但是如果未定義特定屬性，則不應注入col-和class- 。

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

Answer 1

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

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

確實很好。 （我正在使用離子3）

Answer 2

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

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

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

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

這里的true / false是Boolean值，因此您也可以設置conditions ，以在滿足某些條件時添加類/屬性。

如果要通過@Input（）修改列號

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

Answer 3

即使我放錯了：[attr.col-12] ='false'將到達空間設置為標簽。 我使用angular4 / ionic3