Angular2 - 动态添加 HTML 属性和类

Question

你能帮我找到如何在Angular 2中的HTML模板中动态添加属性&&class的答案吗？

例如：

<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

即使我输入了 false ： [attr.col-12]='false' arribute 设置为标签。我使用 angular4/ionic3