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

Posted 2023-03-05

技术标签:

【中文标题】属性 \'checked\' 在类型 \'HTMLElement\' 角度 4 上不存在【英文标题】：Property 'checked' does not exist on type 'HTMLElement' angular 4属性 'checked' 在类型 'HTMLElement' 角度 4 上不存在 【发布时间】：2018-06-08 16:37:32 【问题描述】：

我正在尝试从 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 serve 时，我得到“属性 'checked' 在类型 'HTMLElement' 上不存在”

提前致谢！

【问题讨论】：

你使用反应式形式？试试这个const get_id = document.getElementById('abcde') as HTMLInputElement; 看看如何在您的问题中插入Code and Reformatted Text。并编辑您的帖子。我使用的是普通形式而不是反应形式..感谢您的回答。使用 const 解决了。谢谢 【参考方案1】：

使用这个：

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

【讨论】：

【参考方案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

【讨论】：

【参考方案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 元素的方法之一。此处使用显示的变量完成了两种方式的绑定。

【讨论】：

【参考方案4】：

只需转到您的 nodemodules 文件夹

\node_modules\typescript\lib\lib.dom.d.ts

文件名：lib.dom.d.ts

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

在interface HTMLElement 中添加 checked: boolean;

see image where it is

您还需要在全局节点模块中添加按下控制并快速修复声明属性 checked: boolean;

see this image for global nodemodules

【讨论】：