[英]Property 'checked' does not exist on type 'HTMLElement' angular 4
i am trying to get checkbox checked value from ts(type script) file.我正在尝试从 ts(type script) 文件中获取复选框选中的值。 For this, I have a Boolean variable and the purpose is to show and hide div using this variable value but I am facing a problem.
为此,我有一个布尔变量,目的是使用这个变量值显示和隐藏 div,但我遇到了一个问题。 Please help me to solve this and also give me the right way to do this.
请帮我解决这个问题,并给我正确的方法来做到这一点。 Here is my code...
这是我的代码...
html code html代码
**checkbox code**abcde" class="form-check-input" id="abcde" value="1"
(change)="checked('abcde')"> abcde
show and hide code显示和隐藏代码
*ngIf='shown'
ts file .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;
}
When i run ng serve then I get "Property 'checked' does not exist on type 'HTMLElement'"当我运行 ng serve 时,我得到“类型 'HTMLElement' 上不存在属性 'checked'”
Thanks in advance!提前致谢!
Use this:使用这个:
const ele = document.getElementById("idOfElement") as HTMLInputElement;
ele.checked = false;
In your HTML在你的 HTML
<input #abcde type="checkbox" (change)="func()" />
In your component在您的组件中
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
}
}
//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>
Here, This is one of the way to do show and hide div element on basis of checkbox selection and deselection.在这里,这是根据复选框选择和取消选择来显示和隐藏 div 元素的方法之一。 Two way binding is done here with shown variable.
此处使用显示的变量完成两种方式的绑定。
just go to your nodemodules folder只需转到您的 nodemodules 文件夹
\\node_modules\\typescript\\lib\\lib.dom.d.ts \\node_modules\\typescript\\lib\\lib.dom.d.ts
file name : lib.dom.d.ts
文件名:
lib.dom.d.ts
search for this 'Any HTML element.搜索此“任何 HTML 元素”。 Some elements directly implement this interface' line no.
一些元素直接实现了这个接口的行号。 6374 (in my node module)
6374(在我的节点模块中)
and in interface HTMLElement
add checked: boolean;
并在
interface HTMLElement
添加checked: boolean;
also you need to add in your global nodemodule also press control and quick fix declare property checked: boolean;
您还需要在全局节点模块中添加还按控制和快速修复声明属性
checked: boolean;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.