Javascript 如何在角度为2*ngFor的循环中选择单击事件

我正在制作每周日历，用户可以在日历标题中单击一周中的几天来突出显示当天的事件：

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

但如果我这样做，那么每当用户将鼠标悬停在空的日期标题上时，浏览器仍然会将光标的形式从箭头更改为手形。我只希望在有点击事件的日子里有点击事件，所以这不会发生。大概是这样的：

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

---

但是我不知道如何做到这一点。

您可以简单地在td元素上绑定disabled属性，如下所示：

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

---

您只需按如下方式绑定td元素上的disabled属性：

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

光标变为指针是因为CSS规则，而不是因为您对单击事件有绑定。我想你想要的是：

{{day.header} 光标变为指针是因为CSS规则，而不是因为您对单击事件有绑定。我想你想要的是：

{{day.header}

---

将循环放入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>

---

将循环放入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>

---

创建一个类，在没有事件时显示所需的游标

.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>

---

使用该代码，您的函数将在单击时被调用，但将显示您定义的光标。

创建一个类，在没有事件时显示所需的光标

.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>

使用该代码，您的函数将在单击时被调用，但将显示您定义的光标。

我今天遇到了这个有条件地阻止调用事件的解决方案。逻辑上，一个事件的条件如下：

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

我今天遇到了这个解决方案，它有条件地阻止了对事件的调用。逻辑上，一个事件的条件如下：

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

---

这是一个聪明的解决方案！这是一个聪明的解决方案！