Comment utiliser correctement « ngClass » pour le style conditionnel en angulaire ?

Classe conditionnelle avec *ngClass dans Angular

L'une des exigences courantes dans les applications angulaires est d'appliquer des classes de manière conditionnelle en fonction de certaines conditions. La directive ngClass fournit un moyen pratique d'y parvenir.

Problème rencontré

Vous pouvez rencontrer une erreur telle que "Impossible de lire la propriété 'supprimer' d'undéfini" lors de l'utilisation de ngClass d'une manière particulière. Cette erreur indique une utilisation incorrecte de la directive.

Utilisation correcte de ngClass dans Angular 2

Angular 2 et supérieur offre plusieurs options pour appliquer des classes conditionnelles :

Option 1 :

[class.my_class] = "step === 'step1'"

Cette syntaxe ajoute le Classe 'my_class' uniquement si la variable 'step' est égale à 'step1'.

Option 2 :

[ngClass] = "{'my_class': step === 'step1'}"

Cette option utilise un littéral d'objet pour spécifier la condition et la classe correspondante à appliquer.

Option 3 :

[ngClass] = "{'1' : 'my_class1', '2' : 'my_class2', '3' : 'my_class4'}[step]"

Cette méthode utilise une recherche de hachage pour appliquer la classe appropriée en fonction de la valeur de la variable « étape ».

Option 4 :

[ngClass] = "step == 'step1' ? 'my_class1' : 'my_class2'"

Cette syntaxe utilise l'opérateur ternaire pour définir conditionnellement la classe en fonction de « l'étape » variable.

Exemple

Dans votre code, vous avez indiqué utiliser ngClass={active: step==='step1'}, ce qui n'est pas la syntaxe correcte. Utilisez plutôt l’une des options décrites ci-dessus. Par exemple :

<ol>
  <li [ngClass]="{'active': step==='step1'}" (click)="step='step1'">Step1</li>
  <li [ngClass]="{'active': step==='step2'}" (click)="step='step2'">Step2</li>
  <li [ngClass]="{'active': step==='step3'}" (click)="step='step3'">Step3</li>
</ol>

L'adoption de l'une de ces approches alternatives devrait résoudre l'erreur que vous rencontrez. Reportez-vous à la documentation angulaire pour plus de détails.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!