Angular2：如何在某些条件下 add/change class 元素

Question

我正在使用 Angular 和 Semantic-UI 框架开发 Web 应用程序。

为了在特定条件下向元素添加 class 我已经使用了以下方式：

[class.className]='condition'

现在我有多个class名字，我不知道怎么处理。

所以我尝试使用 ngClass，如 Plunker 所示。正如您在此处看到的，此解决方案根本不起作用。

那么，如何修复我的 Plunker 使其正常工作？

Answer 1

您可以在此处使用 [ngClass] 构建包含多个 class 的字符串。

<div [ngClass]="('firstClass ' + (active ? 'secondClass' : ''))"></div>

在这种情况下，firstClass 是第一个 class，active 是一个布尔值，它设置 secondClass class。

因此，在您的情况下，您的代码可以变为：

<div class="field">
    <label for="name">Name:</label>
    <div class="ui input" [ngClass]= "((myForm.controls.name.pending ? 'loading' : '') + 'secondClass')">
        <input id="name" [formControl]="myForm.controls.name">
    </div>
</div>

记得在两个连续的 class 之间提供空格。

编辑

至于你的 plunker，你必须将 ngClass 语句添加为：

[ngClass]="[o.order === 'asc' ? 'chevron circle up': '' , o.order === 'desc' ? 'chevron circle down': '']"

Answer 2

您可以使用 [ngClass]

<div class="field">
    <label for="name">Name:</label>
    <div class="ui input" [ngClass]="{loading : myForm.controls.name.pending}">
        <input id="name" [formControl]="myForm.controls.name">
    </div>
</div>

当您的测试结果是 true 时，它会在您的类中添加类否则它 从元素中删除它们

Angular2：如何在某些条件下 add/change class 元素

Angular2: how to add/change class to element on certain conditions

css

styles

ng-class

semantic-ui

angular