Entonces, estoy creando una aplicación de cuestionario donde tengo una barra de desplazamiento para preguntas y en esa barra de desplazamiento tengo botones que dependen de la longitud de un conjunto de preguntas. Así que he creado esos botones usando la directiva *ngFor. Ahora lo que quiero hacer es cada vez que un usuario selecciona cualquier opción (mcq), los botones de pregunta en la barra de desplazamiento deben resaltarse de la siguiente manera:
Código HTML para la barra de desplazamiento de preguntas:
<div id="answer-buttons" class="ques-grid "> <button #navBarButton *ngFor="let item of items">{{item}}</button> </div>Intenté hacerlo accediendo primero a los botones usando ViewChild en el archivo ts y luego aplico algo de lógica, pero no funciona, solo cambia el color del primer botón
@ViewChild('navBarButton',{ static: false }) navBarButton:ElementRef //and in some function I've tried this logic if(this.attemptedQuestionCount[this.currentQuestionIndex]==1){ this.navBarButton.nativeElement.style.backgroundColor = "#228B22" } else{ this.navBarButton.nativeElement.style.backgroundColor = "#FCF55F" }¿Cómo puedo lograr mi objetivo?
Puede verificar el número de preguntas intentadas y cambiar el color de fondo de esta manera
<div id="answer-buttons" class="ques-grid "> <button *ngFor="let question of questions; let i=index" [style.background-color]="attemptedQuestionCount[i] === 1 ? '#228B22' : '#FCF55F'">{{question}}</button> </div>Agregue la etiqueta del botón de la siguiente manera:
<button *ngFor="let question of questions; let i=index" [style.background-color]="attemptedQuestionCount[i] === 1 ? '#228B22' : '#FCF55F'">{{question}}</button>Puede agregar el controlador de clics directamente al botón usando
<button *ngFor="let item of items; let indexOfelement=index" (click)="heyYouClicked(indexOfelement)">{{item}}</button>Y luego en el componente colocas el controlador.
export class AppComponent { items = ["hello", "world"] heyYouClicked(index){ console.log("you clicked " + index) } }