web-dev-qa-db-fra.com

Plusieurs classes dans ngClass

J'essaie d'ajouter plusieurs valeurs dans * ngClass, ce qui fonctionnait sur les versions alpha précédentes et ne semble pas fonctionner maintenant sur angular2 beta:

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

Cela produit une erreur:

EXCEPTION: TypeError: Impossible de lire la propriété 'ajouter' de non défini dans [['fa', 'fa-star'] dans PostView @ 30: 27]

Qu'est-ce que j'oublie ici?

angularng-class
11
Sagi

Vous devez utiliser des crochets pour créer une liaison de propriété. Voir ce plunk

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

Si vous n'allez pas changer ces classes dynamiquement, alors utiliser ngClass est exagéré. Vous pouvez simplement utiliser class="fa fa-star" dans votre modèle.

ngClass doit être utilisé lorsque vous souhaitez les activer et les désactiver dynamiquement. Il y a un exemple dans les documents:

Votre composant aurait une méthode:

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

puis utilisez ngClass dans votre modèle comme ceci:

<div [ngClass]="setClasses()">This div is saveable and special</div>
6
Zyzle

Vous pouvez également créer une chaîne contenant plusieurs classes.

Dans ce cas additionalClass est une variable @Input contenant le nom de classe et active est un booléen qui définit la classe active

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