Comment faire événement click en option dans une boucle angulaire 2 * ngFor

Question

Je fais un calendrier hebdomadaire, où les utilisateurs peuvent cliquer sur les jours de la semaine dans l'en-tête de calendrier pour mettre en évidence les événements de ce jour-là:

<thead> 
    <tr> 
     <td *ngFor="let day of days | async" 
      (click)="highlightWeek(day)">{{day.header}}</td> 
    </tr> 
</thead> 

Je voudrais faire en sorte que quand il n'y a pas quand il n'y a pas d'événements sur un jour donné, alors l'en-tête de ce jour n'est pas cliquable. Cela pourrait se faire dans le composant comme ceci:

highlightWeek(day) { 
    if (day.events.length > 0) { 
     ... 

Mais si je fais cela, le navigateur change encore la forme du curseur de la flèche à la main, chaque fois que l'utilisateur passe au-dessus des têtes de jour vides. Je voudrais seulement avoir l'événement click sur les jours où il y a un événement, donc cela n'arrive pas. Quelque chose comme ceci:

<thead> 
    <tr> 
     <td *ngFor="let day of days | async" 
      (if (day.events.length > 0)): (click)="highlightWeek(day)">{{day.header}}</td> 
    </tr> 
</thead> 

Mais je ne sais pas comment accomplir cela.

Answer 1

Mettez la boucle dans un conteneur ng et vous pouvez avoir un td si elle affiche cliquable et un autre sinon. Comme ceci:

<thead> 
<tr> 
    <ng-container *ngFor="let day of days | async"> 
     <td (click)="highlightWeek(day)" style="cursor: pointer" *ngIf="day.events.length>0"> 
     {{day.header}} 
     </td> 
     <td *ngIf="day.events.length===0" style="cursor: default">{{day.header}}</td> 
    </ng-container> 
</tr> 
</thead> 

Answer 2

vous pouvez simplement lier l'attribut disabled sur l'élément td comme suit:

<td *ngFor="let day of days | async" 
      (click)="highlightWeek(day)" 
      [disabled]='day.events.length > 0? null : true'> 
    {{day.header}} 
</td> 

Answer 3

Le curseur à pointer en raison des règles CSS, non pas parce que vous avez une fixation sur l'événement click. Je pense que vous voulez quelque chose comme:

<td *ngFor="let day of days | async" 
 
    [ngStyle]="{ 'cursor': day.events.length > 0 ? 'pointer' : 'default' }" 
 
    (click)="day.events.length === 0 || highlightWeek(day)"> 
 
    {{day.header}} 
 
</td>

Answer 4

créer une classe pour montrer le curseur que vous voulez, quand il n'y a aucun événement

.no-events:hover{ 
    cursor: not-allowed !important; 
} 

puis attribuez-lui cette classe dans votre modèle

<thead> 
    <tr> 
     <td [class.no-evets]="day.events.length > 0" *ngFor="let day of days | async" 
     (click)="highlightWeek(day)">{{day.header}}</td> 
    </tr> 
</thead> 

avec ce code votre fonction sera appelé cliquer mais le curseur sera affiché que vous avez défini.