Угловое смешение различных выражений [ngClass]

Question

Я хотел бы смешать выражения [ngClass] в Angular, сначала я хочу добавить массив классов в свой компонент, а затем я также хотел бы добавить класс, основанный на булевом выражении.Я могу добавить массив с <li [ngClass]="item.status"> и добавить класс на основе логического выражения с <li [ngClass]="{active: item.active}">

Примечание: item.status - это массив, подобный item.status=['done', 'progressed']

Но как мне смешать оба стиля?Следующее не работает, потому что только атрибут является дубликатом.<li [ngClass]="item.status" [ngClass]="{active: item.active}">

Заранее спасибо

Answer 1

Вы можете попробовать этот код здесь, ваш компонент приложения равен

member = true;
paidAmount = true;
setMyClass() {
    let classes =  {
         member: this.someProperty,    
         paid: this.paidAmount, 
    };
    return classes;
}

, где 'member' и 'paid' это имя класса

---

и ваш шаблон использует этот код

<div class="myclass" [ngClass]="setMyClass()">Call to Action</div>

Answer 2

Вы можете сделать [class.myClass]="booleanExpression", но я не рекомендую добавлять его вместе с [ngClass], потому что тогда у вас может быть класс несколько раз.

Вместо этого я бы рекомендовал либо сделать [class.myClass]="booleanExpression" для каждогои каждый класс, который вы используете в этом HTML-теге (имейте в виду, что "booleanExpression" может устанавливать / отменять более одного класса, чтобы не увеличивать количество строк кода в вашем файле .ts, только в шаблоне).Или я бы сделал метод получения для [ngClass]:

[ngClass]="liClasses"

get liClasses(): string {
    const result = "";
    if (conditionOne) { result += " myClassOne"}
    if (conditionTwo) { result += " myClassTwo"}
    return result;
}

, обратите внимание, что решение 1) более перфоманно, так как методы получения запускаются при каждом обнаружении изменений ине только когда условие одно или условие два меняется.

Answer 3

Поскольку вы не можете иметь [ngClass] несколько раз в одном и том же элементе, вы можете использовать комбинацию [ngClass] иclass.При использовании class таким образом с интерполяцией, вы также можете добавить несколько классов.Попробуйте использовать следующий способ.

Например, HTML

<li  class="t-size {{item.status.join(' ')}}" [ngClass]="{'active': item.active }">

Например, компонент

 item = {
    status : ['done', 'progressed'],
    active: true
  }

НапримерCSS

.done{
  font-weight: bold;
}

.progressed{
  color:blue;
}

.t-size{
  font-size: 2rem;
}

.active{
  background-color: yellowgreen;
}

WORKING DEMO

Надеюсь, это поможет вам!:)

Answer 4

Вы можете использовать оба, как показано ниже:

<li [class]="item.status" [ngClass]="{active: item.active}">

Вы не можете использовать ngClass более одного раза в одном элементе.