角垫复选框getElementById

Question

我在使用 angular material 的 mat-checkbox 时遇到了问题。我已经为复选框提供了这样的 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

你也可以这样做：

<mat-checkbox class="toolbar-checkbox" [checked] = "myCondition" id="myCheckbox">
    MyCheckbox
</mat-checkbox>

myCondition 在模板或类中设置，可以是任何逻辑表达式。

或

<mat-checkbox class="toolbar-checkbox" id="myCheckbox" [checked] = "myCondition()">
    MyCheckbox
</mat-checkbox>

其中 myCondition() 是在类中定义的一个方法，应该根据任何逻辑表达式返回一个布尔值。

这将允许您跳过任何 DOM 操作并处理模板中的复选框选中状态。

Answer 2

使用ViewChild 装饰器。将您的模板更改为：

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

.. 在你的打字稿中：

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。