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

但是，如果我这样做，那么只要用户将鼠标悬停在空白日标题上，浏览器仍会将光标的形式从箭头更改为手形。我想在有事件的日子里只有click事件，所以这不会发生。像这样：

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

Answer 2

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

<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事件有绑定。我想你想要的东西：

＆＃13;

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

＆＃13;

Answer 4

创建一个类，以便在没有事件时显示您想要的光标

Workbook_BeforeClose()

然后在模板中分配该类

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

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

Answer 5

我今天遇到了这个internetzer's解决方案，该解决方案有条件地阻止了对该事件的调用。从逻辑上讲peek具有如下事件的条件：

junk

如何在角度2 * ngFor循环中使click事件可选

5 个答案: