角マットチェックボックスgetElementById

Question

マテリアルチェックのマットチェックボックスに問題があります。私はこのようなこの要素を持つものにしようとしている。その後

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

：

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

しかしunfortunally、私はこのエラーを取得しています：

私は、チェックボックスにこのようなIDを与えてくれました

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を参照してください。

Answer 2

あなたも行うことができます。myConditionは、テンプレートまたはクラスに設定されており、任意の論理式を使用でき

<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> 

。

これにより、DOM操作をスキップして、テンプレートのチェックボックスの状態を確認することができます。