J'essaie d'ajouter une classe <ul>
<li class="locked" *ngFor="let subLecture of lectureList; let j = index"
[ngClass]="{ 'current': lectureIndex == j}"
(click)="lectureItemClick(j)">
<a>{{subLecture}}</a>
</li>
</ul>
<button (click)="nextLectureSecond()">Next</button>
3 Réponses :
Bien qu'il ne soit pas recommandé d'utiliser le mot clé code> si vous utilisez le rendu côté serveur, vous pouvez également utiliser une autre solution de contournement également, vous pouvez également suivre le chemin ci-dessous.
<li class="locked" *ngFor="let subLecture of lectureList; let j = index" [id]="j">
....
</li>
nextLectureSecond() {
....
let ele = document.getElementById(this.lectureIndex.toString());
(<HTMLParagraphElement>ele).classList.add("unlocked");
const a = this.lectureIndex++;
....
}
Vous pouvez ajouter une autre condition également dans le Voir si cela aide: De même, vous pouvez modifier la logique en fonction de votre scénario. Stackblitz: [ngclass] , quelque chose comme 'non déverrouillé': lectutureindex> j si vous souhaitez appliquer la classe à tous les précédents éléments.
Ceci est assez utile, mais y a-t-il une façon que lorsque je clique sur l'élément de la liste, il ne supprimera pas la classe que nous ajoutons i.e, "déverrouillé"? Cuz il l'enlève quand je clique sur l'un des LI
Bien sûr, heureux d'aider. J'ai modifié le code et l'exemple de Stackblitz. S'il vous plaît accepter la réponse si elle a aidé.
Non non, peut-être que vous avez mal compris. Je veux une classe actuelle sur l'article qui est sélectionné, maintenant, il ne supprime pas aussi le courant, le comportement précédent était correct mais je voulais juste avoir une classe "déverrouillée" enlevé.Hope Vous comprenez maintenant
OK, cela signifie une fois que la conférence est déverrouillée, vous souhaitez conserver la classe déverrouillée appliquée à celle-ci. Pour cela, nous devrions sauver l'état quelque part. J'ai modifié mon stackblitz pour ce scénario. Faites-moi savoir si cela aide.
juste l'article précédent?
Changez votre déclaration de classe NG comme ceci:
[ngclass] = "{'actuel': lectutureindex == j," déverrouillé ": (LectureDex! = 0 && LectureDex - 1 == j)}"
SE ici
Pas seulement la précédente, chaque article que je passe