我从角度材料的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)]的情况下使用复选框做更好的方法?
答案 0 :(得分:5)
使用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。
答案 1 :(得分:0)
你也可以这样做:
<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操作并处理模板中的复选框检查状态。