Wie Click-Ereignis optional in einem Winkel 2 * ngFor Schleife

Question

Ich mache einen Wochenkalender zu machen, wo die Nutzer die Tage der Woche im Kalender-Header an diesem Tag die Ereignisse zu markieren klicken:

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

Ich möchte es so machen, dass, wenn es keine gibt, wenn es keine Ereignisse an einem bestimmten Tag gibt, die Überschrift für diesen Tag nicht anklickbar ist. Dies könnte wie so in der Komponente erfolgen:

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

Aber wenn ich dies tue, dann der Browser ändert noch die Form des Cursors von dem Pfeil auf die Hand, wenn der Benutzer über den leeren Tag Header schwebt. Ich möchte nur die Click-Events an den Tagen haben, an denen es Events gibt, also passiert das nicht. Etwas wie dieses:

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

Aber ich weiß nicht, wie man das erreicht.

Answer 1

Setzen Sie die Schleife in einem ng-Container und dann können Sie eine td haben die Anzeige, wenn sie angeklickt werden sollte, und eine andere, wenn nicht. Wie folgt aus:

<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

können Sie einfach das disabled-Attribut auf dem td-Element binden, wie folgt:

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

Answer 3

Der Cursor wird pointer wegen CSS-Regeln, nicht, weil Sie eine Bindung auf dem Click-Ereignis haben. Ich glaube, Sie wollen so etwas wie:

<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

eine Klasse erstellen Cursor zeigen, die Sie wünschen, wenn es keine Veranstaltungen

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

weisen Sie dann diese Klasse in Ihrer Vorlage

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

mit diesem Code Ihre Funktion wird beim Klicken aufgerufen, aber der Cursor wird angezeigt, den Sie definiert haben.