web-dev-qa-db-fra.com

donne la classe active onclick en ngFor angular 2

Salut, j'ai une liste non ordonnée et tous ont une classe active. Je souhaite basculer la classe active lorsque vous cliquez sur un élément de la liste. Mon code est comme ça

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules" class="active">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

quelqu'un peut-il m'aider à le faire?

angularng-classngfor
6
Vugar Ahmadov

Vous pouvez faire quelque chose comme: 

<ul class="sub_modules">
  <li (click)="activateClass(subModule)"
      *ngFor="let subModule of subModules"
      [ngClass]="{'active': subModule.active}">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

Sur le composant

activateClass(subModule){
  subModule.active = !subModule.active;    
}

Sur la classe Ng, la première propriété est la classe que vous voulez ajouter et la seconde est la condition;

11
Eduardo Vargas

faites juste une propriété d'index. utilisez let i = index pour définir l'index à l'aide d'un événement (clic). Puis vérifiez si selectedIndex === i si oui la classe "active" à true

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules; let i = index" 
      [class.active]="selectedIndex === i" 
      (click)="setIndex(i)">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

Puis sur le fichier TypeScript: il suffit de définir selectedIndex.

export class ClassName {
   sIndex: number = null;

   setIndex(index: number) {
      sIndex = index;
   }
}
8
doppelgunner

Je pense que vous pouvez trouver votre réponse ici:  AngularJs - Meilleures pratiques pour l'ajout d'une classe active au clic (ng-repeat)

Vous pouvez cibler et appliquer le code CSS à un élément/objet à l'aide du code $index d'Angular. Le post explique et démontre la logique mieux que moi.

0
Patrick McDermott