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

Answer 1

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>