无法使用模板引用变量触发mat复选框更改事件

Question

我有一个table，其中一个包含两个columns-mat-checkbox，另一个包含String。其思想是，当单击字符串单元格时，它将触发mat-checkbox.change事件。

我已经使用模板引用变量在for循环中引用了mat-checkbox。我可以访问并设置其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

尝试更改(change)="selectRole(role)"到(change)="selectRole($event,role)"

Answer 2

在这种特殊情况下，一个潜在的解决方案也是从String列上的单击事件调用selectRole(role)方法。如果selectRole方法控制selected状态，则以下代码将有效地实现所需的功能。

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

Answer 3

在您的情况下，请尝试一下，

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

实际上，_onInputClick($event)是我们需要调用复选框模板引用的事件。它将触发(change)事件。