Question

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

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

[class.className]='condition'

现在我有多个班级名称，我无法弄清楚如何处理它。

所以我尝试使用此Plunker中显示的ngClass。正如你在这里看到的，这个解决方案根本不起作用。

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

Answer 1

您可以使用[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时，它会在您的课程中添加课程，否则从元素中删除

Answer 2

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

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

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

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

<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': '']"

Angular2：如何在某些条件下向元素添加/更改类

2 个答案: