如何使點擊事件可選在角2 * ngFor環

Question

我想提出一個周曆，用戶可以點擊一週的日子在日曆頭突出在當天的事件：

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

我想這樣做，以便當沒有特定日期的活動時，那麼當天的標題不可點擊。這可能會在組件來完成，像這樣：

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

但如果我這樣做，那麼瀏覽器依然改變光標的形式，從箭頭手，只要用戶將鼠標懸停在空天頭。我只想在發生事件的日子裏有點擊事件，所以這不會發生。像這樣的：

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

但我不知道如何做到這一點。

Answer 1

把環在NG-容器中，然後你可以有一個TD顯示，如果它應該是點擊，另一個如果不。就像這樣：

<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

您可以禁用屬性只是綁定TD元素上進行如下：

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

Answer 3

因爲CSS規則光標變爲pointer，不是因爲你有一個上的click事件綁定。我想你想要的東西，如：

<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

創建一個類來表示要遊標時沒有活動

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

然後分配類模板

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

與代碼的功能將在點擊時被調用，但會顯示您定義的光標。