Angular 2 ngClass-应用多个类，带有类变量

Question

我正在尝试将变量驱动的类以及其他使用ngClass的类添加到元素中。

例：

// inputExtraClass = 'form-control-sm'

// Working
<input class='form-control' [ngClass]="inputExtraClass" placeholder="Working">

// Not working
<input class='form-control' [ngClass]="{inputExtraClass: true}" placeholder="Not working">

柱塞

Answer 1

为您的问题提供完整的答案，

做： <input class='form-control' [ngClass]="{'inputExtraClass': true}" placeholder="Not working">

如果您想要一个以上的班级或在班级之间切换，还可以执行类似的操作

<input class='form-control' [ngClass]="{'inputExtraClass': true, 'notInputExtraClass': !true }" placeholder="Not working">

这样，它将是一个类或另一个类

您也可以使用此选项来选择其他任何变体，或者像这样在组件中创建一个属性：

toggleClass: boolean = true;

并在您的html中：

<input class='form-control' [ngClass]="{ 'inputExtraClass': toggleClass, 'notInputExtraClass': !toggleClass }" placeholder="Not working">

同样的想法，然后您可以创建一个方法并更改toggleClass属性或其他任何方法:)希望它有所帮助

Answer 2

您可以通过以下方式使用“数组形式”（https://angular.io/api/common/NgClass#description ）：

cond1 = true;
cond2 = false;
smClass = 'form-control-sm';
xlClass = 'form-control-xl';

<input class='form-control' [ngClass]="[ smClass, cond1 ? 'form-control-lg' : '', cond2 ? xlClass : '' ]">

这会是：

<input class="form-control form-control-sm form-control-lg">

Answer 3

您可以在 ngClass 中使用表达式：

<input class='form-control' [ngClass]="(addClassIfTrue) ? 'inputExtraClass' : ''" placeholder="Working">