Pourquoi '*ngClass' dans Angular génère-t-il une erreur 'Impossible de lire la propriété 'supprimer' un élément non défini' ?

Classe conditionnelle avec *ngClass dans Angular

Angular fournit diverses options pour appliquer conditionnellement des classes CSS aux éléments HTML. Une méthode courante consiste à utiliser la directive *ngClass. Cependant, s'il n'est pas utilisé correctement, il peut entraîner des erreurs telles que "Impossible de lire la propriété 'supprimer' d'undéfini."

Problème :

Étant donné le code angulaire ci-dessous, pourquoi l'erreur suivante se produisant :

Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass

<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>

Solution :

L'erreur se produit en raison de l'utilisation de la directive ngClass avec l'expression conditionnelle dans la version angulaire 2 . Dans Angular 2, la directive ngClass prend un objet comme argument, où les clés représentent les noms de classes CSS et les valeurs représentent des expressions booléennes.

Pour résoudre ce problème, remplacez la directive *ngClass par l'un des les méthodes suivantes fournies par Angular :

Type Un :

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

Type deux :

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

Type trois :

[ngClass]="{1: 'active', 2: 'step2', 3: 'step3'}[step]"

Type quatre :

[ngClass]="step === 'step1' ? 'active' : 'inactive'"

Pour plusieurs conditions de classe, vous pouvez utiliser la notation d'objet comme indiqué dans le type deux. Reportez-vous à la documentation Angular pour plus de détails sur l'utilisation de *ngClass.

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!