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）