如何在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，则将其放置为这样的类：

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