属性'checked'在类型 'HTMLElement' 角度 4 上不存在

Question

我正在尝试从TS（type script）文件中获取复选框。为此，我有一个布尔变量，目的是使用此变量值显示和隐藏DIV，但我面临问题。请帮助我解决这个问题，还为我提供正确的方法。这是我的代码...

html代码

**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;
}

当我运行ng服务时，我会在类型的'htmlelement'中获得"属性'检查'"

预先感谢！

Answer 1

使用以下：

const ele = document.getElementById("idOfElement") as HTMLInputElement;
ele.checked = false;

Answer 2

在您的html

中

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

在您的组件中

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 3

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

在这里，这是根据复选框选择和取消选择显示和隐藏DIV元素的方法之一。在此处使用显示的变量进行两种绑定。

Answer 4

只需转到您的NodeModules文件夹

node_modules typescript lib lib.dom.d.t.ts

文件名： lib.dom.d.ts

搜索此'任何HTML元素。有些元素直接实现此接口'行号。6374（在我的节点模块中）

和 interface HTMLElement添加 checked: boolean;

请参阅图像

您还需要添加全局nodemotule按控制和快速修复声明属性 checked: boolean;

请参阅此图像以获取全局节点模块