javascript - How to make click event optional in an angular 2 *ngFor loop - Stack Overflow

admin管理员组

文章数量:1326671

I am making a weekly calendar, where users can click the days of the week in the calendar header to highlight the events on that day:

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

I would like to make it so that when there are no when there are no events on a given day, then the header for that day is not clickable. This could be done in the ponent like so:

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

But if I do this, then the browser still changes the form of the cursor from the arrow to the hand, whenever the user hovers over the empty day headers. I would like to only have the click event on the days where there are event, so this doesn't happen. Something like this:

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

But I don't know how to acplish that.

I am making a weekly calendar, where users can click the days of the week in the calendar header to highlight the events on that day:

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

I would like to make it so that when there are no when there are no events on a given day, then the header for that day is not clickable. This could be done in the ponent like so:

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

But if I do this, then the browser still changes the form of the cursor from the arrow to the hand, whenever the user hovers over the empty day headers. I would like to only have the click event on the days where there are event, so this doesn't happen. Something like this:

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

But I don't know how to acplish that.

• javascript
• angular
• onclick
• ngfor

Share Improve this question Follow edited Aug 9, 2017 at 11:37 Vivz 6,63022 gold badges1818 silver badges3434 bronze badges asked Aug 9, 2017 at 11:36 BorisBoris 5,17644 gold badges4848 silver badges7272 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Put the loop in an ng-container and then you can have one td displaying if it should be clickable and another if not. Like this:

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

The cursor changes to pointer because of CSS rules, not because you have a binding on the click event. I think you want something like:

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

you can simply bind the disabled attribute on the td element as follows:

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

create a class to show cursor which you want when there are no events

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

then assign that class in your template

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

with that code your function will be called on click but the cursor will be shown which you defined.

I came across this internetzer's solution today which conditionally prevents call to the event. logically and a condition with the event like below:

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

本文标签： javascriptHow to make click event optional in an angular 2 *ngFor loopStack Overflow