Angular 垫复选框 getElementById

Question

我在使用有 Angular Material 的垫子复选框时遇到问题。我为复选框指定了如下 ID:

<mat-checkbox class="toolbar-checkbox" id="myCheckbox">
    MyCheckbox
</mat-checkbox>

之后我尝试使用这个元素进行如下操作:

(<MatCheckbox>document.getElementById('myCheckbox')).checked = true;

但不幸的是我收到了这个错误:

TS2352: Type 'HTMLElement' cannot be converted to type 'MatCheckbox'. 
Property '_changeDetectorRef' is missing in type 'HTMLElement'. 
(<MatCheckbox>document.getElementById('asdasd')).checked = true;

我该如何解决这个问题，或者有没有更好的方法可以在不使用 [(ngModel)] 的情况下使用复选框执行某些操作？

Answer 1

使用ViewChild装饰师。将您的模板更改为:

<mat-checkbox class="toolbar-checkbox" #myCheckbox>
    MyCheckbox
</mat-checkbox>

..并在您的 typescript 中:

import { ViewChild } from '@angular/core';
import { MatCheckbox } from '@angular/material';

@Component({
    ..... 
})
export class YourComponent {
    @ViewChild('myCheckbox') private myCheckbox: MatCheckbox;

    // You can then access properties of myCheckbox 
    // e.g. this.myCheckbox.checked
}

查看此工作 StackBlitz demo .