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

에서 당신의 HTML

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

에서

Answer 2

는,이 확인란을 선택 및 선택 해제의 기준으로 DIV 요소를 쇼를하고 숨길 수있는 방법 중 하나입니다. 표시된 변수를 사용하여 양방향 바인딩이 여기에서 수행됩니다.