Click not working within an *ngFor repeated table row (Angular)

Question

I'm trying to create a table with a dynamic number of rows and columns. Each row is a name column followed by some checkboxes

<tr *ngFor="let groupPerms of getGroups()">
    <td>{{groupPerms.name}}</td>
    <td *ngFor="let permissionType of availablePermissionTypes">
        <input id="{{groupPerms.name}}.{{$index}}"
                type="checkbox"
                [checked]="groupPerms.checked"
                (click)="doSomething()"/>
    </td>
</tr>

If i drop the outer *ngFor, and 'hardcode' it with the first row, then it works fine and the doSomething method is called. With the outer *ngFor, the click appears to click on the table row element (it flashes slightly). Using chrome's dev tools, clicking seems to be clicking on the repeat part. Adding a (click) to the tr has no effect

<!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->

It works for me. See this stackblitz. Don't forget to add the closing double quote in (click)="doSomething()". — ConnorsFan
Thanks for the stackblitz demo. I'm not sure if that makes me happier that the code if fundamentally right, or more worried that it means there is probably some dodgy css or something getting in the way — t0mmyw
@t0mmyw Seeing as the error/problem now might be elsewhere, you could post some of your other code (related to it) for us to have a look at?Just edit your question and add it.. :) — Sarah
@Sarah, I would do, but its a pretty massive angular project with many scss files etc (plus sensitive as its a work project). I'll take another look on monday with a fresh pair of eyes and update if i find anything interesting to share — t0mmyw

t0mmyw t0mmyw · Accepted Answer · 2019-02-11T15:16:53

I won't lie, I have no idea why this has fixed it, but for closure... adding the trackBy (with indexTracker being a function in the component) has done the job. If anyone knows the reason for this working I would be grateful

<tr *ngFor="let groupPerms of getGroups(); trackBy: indexTracker">
    <td>{{groupPerms.name}}</td>
    <td *ngFor="let permissionType of availablePermissionTypes">
        <input id="{{groupPerms.name}}.{{$index}}"
                type="checkbox"
                [checked]="groupPerms.checked"
                (click)="doSomething()"/>
    </td>
</tr>

Click not working within an *ngFor repeated table row (Angular)

1 Answers