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">

Plunker

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

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

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

Answer 3

您可以通过以下方式使用“数组形式”（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 4

如果有人想直接使用带有动态变量的类名，而没有任何条件，那么他们可以使用这种方式。

<div class="card-table second" ngClass="{{source}} {{currentMode}}">

Angular 2 ngClass - 应用多个类，包含类变量

4 个答案: