如何在 Angular 2 中添加多个类名 ngClass

Question

我正在尝试在 ngclass 中添加多个类名但不工作。我不知道如何在 angular 2 中添加多个 css 类名。classname3 未正确添加。如果有人知道，请帮我解决这个问题。

注意：classname3 是一个变量..动态我正在更改类名。示例：public classname3="itemlist";

app.component.html：

  <div [ngClass]="[check? 'Class name 1' : 'Class name 2 + ' classname3''] "></div>

app.component.ts：

public check=true;
public classname3="itemlist";

Answer 1

如果你只需要添加classname3，把它放在class这样：

<div class="{{ classname3 }}" [ngClass]="[check? 'Class name 1' : 'Class name 2']"></div>

如果您需要针对许多类的逻辑，您可以这样做：

<div [ngClass]="{
    'Class Name 1': check,
    'Class Name 2': !check,
    'Classname3': SomeOtherCheck
    ....
}></div>

文档是一个很好的资源，展示了所有这些。 https://angular.io/api/common/NgClass

Answer 2

[ngClass] 需要一个表达式，考虑到这一点，您需要连接第三个类。

<div [ngClass]="(check) ? 'Class name 1' : 'Class name 2' +' classname3' "></div>