J'ai une gamme de créneaux horaires, je tiens à mettre en évidence l'heure de début Ce dont j'ai besoin est: à mon premier clic, la division sélectionnée sera mise en surbrillance et sur Mon deuxième clic, un autre divisé sélectionné sera mis en surbrillance. Mon code pour la formation diviser dans quel délai est écrit: mon code dossier est:
3 Réponses :
Votre fonction Timeselector doit stocker une référence à cette dernière heure / élément sélectionné dans une position où cette boucle peut y accéder (bonne idée de passer un identifiant unique pour la boucle, c'est-à-dire l'index de la boucle, c'est-à-dire l'index de la boucle actuelle pourrait suffire ici).
Une fois que ceci est fait, vous pouvez utiliser une directive telle que Ngclass Pour voir si clicked_index (ou tout ce que vous l'enregistrez sous) est égal à l'index actuel, puis émettez la classe de surbrillance si VRAI.
Je reçois ton point, mais tu veux-tu m'aider avec l'exemple de code
Un moyen de faire cela est de saisir l'index de l'objet TIME que vous recevez du planificateur et vérifiez si l'index est l'index de début ou de fin. Sur la base de celle-ci, vous pouvez donner des noms de classe distincts avec la fonctionnalité "NgClass" que j'ai montrée ci-dessous et, partant, styles les divs initiaux et finissants différemment.
<div *ngFor="let time of ScheduleTime; let i = index">
<div *ngIf="todayDate == time.date">
<div [ngClass]="i == 0 || i == ScheduleTime.length-1 ? 'timeSlots' : 'specialTimeSlots'" (click)='timeSelector(time)'>{{time.hours}}:{{time.minutes}}</div>
</div>
</div>
Si vous êtes capable de modifier la structure de Vos objets de temps serait alors regarder quelque chose comme ceci: p> Maintenant, lorsqu'un élément est sélectionné, vous pouvez simplement définir les indicateurs en conséquence. Dans votre modèle, vous pouvez ensuite formater ces moments qui ont les drapeaux définis, par exemple p> Vous avez votre staded et enddate dans votre composant qui est réglé correctement. Dans votre modèle, vous pouvez vérifier chaque élément s'il est identique au démarrage / enddate et au format en conséquence. P> Ceci consomme plus de ressources car chaque fois que quelque chose change toutes les dates doivent être analysées à nouveau mais feront le travail Si le tableau code> est relativement petit. P> planifiez code>, vous pouvez ajouter des indicateurs pour ActiveestART- / Endtime. P> moins élégant h1>
<div *ngFor="let time of ScheduleTime">
<div *ngIf="todayDate == time.date">
<div class="timeSlots" [ngClass]="{'startClass': time.hour == st.sh && time.minutes == st.sm, 'endClass': time.hour == et.eh && time.hour == et.em}" (click)='timeSelector(time)'>
{{time.hours}}:{{time.minutes}}
</div>
</div>
</div>
Merci Monsieur. Vous m'avez aidé à atteindre les résultats et je m'occuperai de déclarer des noms de variables à partir de maintenant :)
Pouvez-vous également nous montrer le code dossier de ce composant?
@ Scorpioo590 juste un min
Comment est défini le tableau SchedueTimetime ?
Taille SchedueTime contient 3 champs: date, heures et minutes