Нажмите не работает в * ngДля повторяющейся строки таблицы (угловой)

Question

Я пытаюсь создать таблицу с динамическим числом строк и столбцов.Каждая строка представляет собой столбец имени, за которым следуют некоторые флажки

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

Если я отбрасываю внешний * ngFor и «жёстко кодирую» его с первой строкой, тогда он работает нормально и вызывается метод doSomething.С внешним * ngFor, щелчок появляется, чтобы щелкнуть по элементу строки таблицы (он слегка мигает).Используя инструменты разработчика Chrome, щелчок, кажется, нажимает на повторяющуюся часть.Добавление (клик) к tr не имеет эффекта

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

Answer 1

Я не буду лгать, я понятия не имею, почему это исправило это, но для закрытия ... добавление trackBy (с indexTracker, являющимся функцией в компоненте) сделало свою работу.Если кто-нибудь знает причину этой работы, я был бы признателен

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