Не удается запустить событие изменения флажка с помощью ссылочной переменной шаблона

Question

У меня есть table с двумя columns - mat-checkbox в одном, а другой содержит String. Идея состоит в том, что при щелчке по ячейке строки запускается событие mat-checkbox.change.

Я указал mat-checkbox внутри a for-l oop, используя ссылочную переменную шаблона. Я могу получить доступ и установить его значение checked, однако я больше не могу получить доступ к событию (change) (оно работало ранее).

Недавно я реализовал изменения, которые отображают availableRoles как null, и с тех пор (и соответствующая реализация *ngIf) я не могу инициировать действие изменения из события (click)="roleCheck.change".

Проблема, на которую ссылаются, находится в <tbody> блоке

            <table class="table table-bordered table-hover">

        <thead class="thead-dark">
            <tr>
                <th class="border-right-0">
                    <mat-checkbox (change)="groupRoleCheckToggle()" [checked]="groupRoleCheckState == 2"
                        [indeterminate]="groupRoleCheckState == 1">
                    </mat-checkbox>
                </th>
                <th class="text-center border-left-0 w-100">
                    Roles
                </th>
            </tr>
        </thead>
        <tbody>
            <ng-container  *ngIf="availableRoles">
                <tr *ngFor="let role of availableRoles">
                    <td class="border-right-0">
                        <mat-checkbox (click)="$event.stopPropagation()" (change)="selectRole(role)"
                            [checked]="role.selected" #roleCheck>
                        </mat-checkbox>
                    </td>
                    <td class="border-left-0" (click)="roleCheck.change">
                        <span class="ml-3">
                            {{role.name}}
                        </span>
                    </td>
                </tr>
            </ng-container>
            <tr *ngIf="!availableRoles">
                <td colspan="2" class="text-center">
                    <i>
                        Please select a group...
                    </i>
                </td>
            </tr>
        </tbody>
    </table>

Answer 1

Потенциальным решением в этом конкретном случае также является вызов метода selectRole(role) из события щелчка в столбце String. Фактически, приведенный ниже код обеспечит необходимую функциональность при условии, что метод selectRole управляет состоянием selected.

                <td class="border-left-0" (click)="selectRole(role)">
                    <span class="ml-3">
                        {{role.name}}
                    </span>
                </td>

Answer 2

попробуйте изменить (change)="selectRole(role)" на (change)="selectRole($event,role)"