javascript - 如何在 angular 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-container 中，然后你可以让一个 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>