如何在 angular 中添加多个 class 名称 ngClass 2

Question

我正在尝试在 ngclass 中添加多个 class 名称，但没有 working.I 不知道如何在中添加多个 css class 名称angular 2. classname3 添加不正确。如果有人知道请帮我解决这个问题。

注意：classname3 是一个变量..我正在动态更改 class 名称。示例：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>

如果您需要为很多 classes 提供枢轴的逻辑，您可以改为这样做：

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

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

Answer 2

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

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

How to add mutiple class name ngClass in angular 2