css - Angular 2 : how to add/change class to element on certain conditions

Question

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

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

[class.className]='condition'

现在我有多个类名，我不知道如何处理。

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

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

Answer 1

您可以使用 [ngClass] 构建包含多个类的字符串在这里。

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

在这种情况下，firstClass 是第一个类，active 是一个设置 secondClass 类的 bool 值。

因此，在您的情况下，您的代码可以变成:

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

请记住在两个连续的类之间提供空格。

编辑

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

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