Несколько классов в ngClass

Я пытаюсь добавить несколько значений в * ngClass, что раньше работало в предыдущих альфа-версиях и, похоже, теперь не работает в бета-версии angular2:

<i *ngClass="['fa','fa-star']"></i>

Выдает ошибку:

ИСКЛЮЧЕНИЕ: TypeError: Невозможно прочитать свойство 'add' неопределенного в [['fa', 'fa-star'] в PostView @ 30: 27]

Что мне здесь не хватает?


angular ng-class
person Sagi    schedule 29.12.2015    source источник

Ответы (3)


arrow_upward
25
arrow_downward

Для создания привязки свойств следует использовать квадратные скобки. См. этот кусок

<i [ngClass]="['fa','fa-star']"></i>
person alexpods    schedule 29.12.2015
comment
Как вы изменяете эти классы динамически, если вы предоставляете массив в своем шаблоне? - person Zyzle; 30.12.2015
comment
@Zyzle Я бы создал некоторую переменную для этого массива и изменил бы ее из своего компонента (например, [ngClass]="myDynamicArray"). - person alexpods; 30.12.2015
comment
Тогда я бы обновил ответ, как я уже отмечал, исходный пример ничем не отличается от простого выполнения class="fa fa-star" в шаблоне - person Zyzle; 30.12.2015
comment
@Zyzle Я не думаю, что в этом есть необходимость. Проблема заключалась в использовании неверного синтаксиса для привязки свойств. И вы уже указали примерно class="fa fa-star" в своем ответе. - person alexpods; 30.12.2015

arrow_upward
9
arrow_downward

Вы также можете построить строку, содержащую несколько классов.

В этом случае additionalClass - это переменная @Input, содержащая имя класса, а active - логическое значение, которое устанавливает активный класс

<div [ngClass]="(additionalClass + ' ' + (active ? 'active' : ''))"></div>
person chriszichrisz    schedule 03.11.2016

arrow_upward
6
arrow_downward

Если вы не собираетесь изменять эти классы динамически, то использование ngClass будет излишним. Вы можете просто использовать class="fa fa-star" в своем шаблоне.

ngClass следует использовать, когда вы хотите включать и выключать их динамически. В документации есть пример:

У вашего компонента будет метод:

setClasses() {
  return {
    saveable: this.canSave,      // true
    modified: !this.isUnchanged, // false
    special: this.isSpecial,     // true
  }
}

затем используйте ngClass в своем шаблоне следующим образом:

<div [ngClass]="setClasses()">This div is saveable and special</div>
person Zyzle    schedule 29.12.2015
comment
Я их динамически менял, но ваше решение действительно интересно. - person Sagi; 30.12.2015
comment
Хорошо, но как вы планируете их менять, если вы жестко запрограммировали массив в ngClass? - person Zyzle; 30.12.2015
comment
Я упростил рассматриваемый пример. В моем реальном случае я использую динамические классы, возвращаемые из компонентного метода. - person Sagi; 30.12.2015
comment
В вашем решении setClasses() будет вызываться при каждом обнаружении изменений, в результате чего каждый раз будет создаваться новый объект. Я настоятельно не рекомендую этого делать. Лучше всего было бы просто определить объект прямо в шаблоне представления: [ngClass]="{ saveable: this.canSave, modified: !this.isUnchanged, special: this.isSpecial }". См. Также одна из многих статей в блоге по этой теме. - person Wilt; 08.06.2020