Angular2 - 动态添加HTML属性和类

Question

您能否帮我找一个如何动态添加属性的答案＆amp;＆amp; Angular 2中的HTML模板的类？

例如：

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

上面示例中的

8应来自配置属性，但如果未定义特定属性，则不应注入 col - 和 class - 。< / p>

请不要指出这种类型的属性是一个错误（这种情况发生在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] =＆＃39; false＆＃39;到达时间设置为标签。 我使用angular4 / ionic3