Great! I have a service in my .ts component that loops through an array of court names. Every time I click on a next or back arrow event, a counter is incremented starting at 0, where index 0 corresponds to field 1 and so on.
The issue I'm facing is that I have a condition that displays the hours for each day of the week on a calendar, and the view should update based on the field name. This condition compares the array with the counter. However, the problem is that the view always stays at index 0 and doesn't update, even though the field name changes in the html.
I attempted to handle all the conditions in the html, but there were too many, causing the code to become messy with numerous ng-containers.
Here is the HTML code snippet where the click event is triggered:
<div class="col-1 text-end" id="prev">
<span>◀</span>
</div>
<div class="col-2" id="nomCancha">
<p>{{ canchas[contador] }}</p>
</div>
<div class="col-1 text-start" id="next">
<span (click)="nextd()">▶</span>
</div>
</div>
Condition code snippet and the variable not updating:
if(cancha.name === this.canchas[this.contador])
Here, cancha is the array of courts and this.contador is the variable that holds the counter starting at 0.
Event handling code:
nextd () {
this.contador += 1
if (this.contador === this.canchas.length) {
this.contador = 0
}
}