Как добавить множественное имя класса ngClass в angular 2

Question

Я пытаюсь добавить несколько имен классов в ngclass, но не работает. Я не знаю, как добавить несколько имен классов CSS в угловых 2. 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>