如何通过单击表的td单击材料复选框

Question

我想在单击td时选中复选框。我尝试使用参考变量，但出现错误。

DetailComponent.html：97错误TypeError：jit_nodeValue_15（...）。click不是函数

<td  mat-cell *matCellDef="let element"  (click)="$event.stopPropagation(); checkboxElement.click()" >
    <mat-checkbox (click)="$event.stopPropagation()"
    #checkboxElement
    (change)="$event ? singleToggle(element) : null"
    [checked]="selection.isSelected(element)">
    </mat-checkbox>
</td>

Answer 1

模板引用变量#checkboxElement引用MatCheckbox组件实例，而不是其宿主元素。结果，确实没有错误指示click方法。 MatCheckbox组件确实具有的方法是toggle，并且以下方法应该起作用：

<td (click)="checkbox.toggle()">
  <mat-checkbox #checkbox>
    One
  </mat-checkbox>
</td>

StackBlitz Example