Как нажать на флажок материала, нажав на td таблицы

Question

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

DetailComponent. html: 97 ОШИБКА TypeError: jit_nodeValue_15 (...). щелчок не является функцией

<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, а не на его элемент host. В результате на самом деле не существует метода click, как указано в ошибке. Метод, который есть у компонента MatCheckbox : toggle, и должно работать следующее:

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

Пример StackBlitz