プロパティ 'checked'が 'HTMLElement'タイプの角4にありません

Question

ts（type script）ファイルからチェックボックスのチェック値を取得しようとしています。このために、私はブール変数を持っており、この変数値を使ってdivを表示して隠すことを目的としていますが、私は問題に直面しています。これを解決し、これを行うための正しい方法を私に教えてください。ここに私のコード...

htmlコードは、私はその後、私が手に仕えるNG実行すると

**checkbox code**abcde" class="form-check-input" id="abcde" value="1" 
(change)="checked('abcde')"> abcde 

ショーと非表示のコード

*ngIf='shown' 

tsが

checked(value) { 

    let get_id = document.getElementById('abcde'); 

    if (get_id.checked == true) { 
     this.shown = true 
    } 
    else if (get_id.checked == false) 
     this.shown = false; 
} 

ファイルである「プロパティ'checked'はタイプ 'HTMLElement'に存在しません "

ありがとうございます！あなたのコンポーネントここで

import { Component, ViewChild, ElementRef } from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    @ViewChild('abcde') abcde: ElementRef; 
     func(){ 
      this.abcde.nativeElement.checked 
     } 


} 

Answer 1

//Typescript File (app.component.ts)   
    import { Component } from 'angular/core'; 
       @Component({ 
        selector: 'app-root', 
        template: './app.component.html', 
        styleUrls: ['./app.component.css'] 
       }) 
       export class AppComponent { 
        public shown = false; 
       } 

    //Html Code (app.component.html) 
     <form #myForm='ngForm'>  
       <input type="checkbox" class="form-control" 
        #checkBox="ngModel" 
        [(ngModel)]="shown" name="checkBox"> 
     </form> 
       <div *ngIf="shown"> 
        <!---Your Code Here...---> 
       </div> 

で

Answer 2

あなたのHTMLで

<input #abcde type="checkbox" (change)="fun()" /> 

、これがショーを行うと、チェックボックスの選択と選択解除に基づいてのdiv要素を非表示にする方法の一つです。表示された変数を使用して双方向バインディングが行われます。