类型'HTMLElement‘angular 4上不存在属性'checked’
类型'HTMLElement'angular 4上不存在属性'checked'。
首先，让我们解释一下这个问题的背景。在Angular 4中，使用模板驱动的表单来处理表单输入。当在模板中使用双向绑定时，如果绑定的元素是一个input类型的元素，我们可以使用"checked"属性来检查复选框是否被选中。但是，对于类型为'HTMLElement'的元素，没有"checked"属性可用。
要解决这个问题，我们可以使用类型断言来告诉编译器元素的确切类型。在Angular中，可以使用"as"关键字来进行类型断言。
例如，如果你想检查一个复选框是否选中，可以使用以下代码：
let checkbox = document.getElementById('myCheckbox') as HTMLInputElement;
if (checkbox.checked) {
// 复选框已选中
} else {
// 复选框未选中
}在上面的代码中，我们使用类型断言将类型'HTMLElement'转换为'HTMLInputElement'，这样就可以访问复选框的"checked"属性了。
在Angular中，我们可以使用Angular Forms模块来处理表单输入，并且不需要直接访问DOM元素。这样可以更好地利用Angular的双向绑定和验证机制。以下是一些相关的链接和建议：
- Angular Forms官方文档：Angular Forms
- Angular Forms教程：Angular Forms Tutorial
- 腾讯云相关产品：腾讯云提供了一系列的云计算产品，如云服务器、云数据库、云存储等。你可以根据具体需求选择适合的产品。更多信息请访问腾讯云官方网站：腾讯云。
总结起来，当在Angular 4中遇到类型'HTMLElement'上不存在'checked'属性的问题时，可以使用类型断言来告诉编译器元素的确切类型，并且可以通过Angular Forms模块来更好地处理表单输入。腾讯云提供了一系列的云计算产品，可以根据具体需求选择适合的产品。
相关·内容
我正尝试在我的Angular应用程序中使用下面的jQuery代码，这是选择下拉组件所需的。 document.querySelector('.dropdown-el').click(function(e) {
e.preventDefault();
e.stopPropagation();
$(this).toggleClass('expanded');
$('#' + $(e.target).attr('for')).prop('checked', true);
});
$(document).
浏览 737提问于2020-06-18得票数 0
在angular8环境中的编译过程中，我在终端中遇到了这个错误。在本地主机上，我浏览页面时没有任何问题，控制台中也没有任何错误。我为分配了该dataset属性的变量创建了一个console.log，它可以正确读取。下面是有趣的代码部分：
let timelineEls = document.querySelectorAll('[data-scroll-timeline]');
scroll.on("scroll", () => {
for ( let i = 0; i < timelineEls.length; i++ ) {
浏览 246提问于2020-03-02得票数 12
回答已采纳
2回答
我试图打印一个网格，但是setDomLayout()方法不被识别。这是我的html：
<div class="ui-g-12 ui-g-nopad print" [ngStyle]="style">
ag-grid-angular #grid id="grid-printable"
style="width: 100%; height: 100%;"
class="ag-theme-blue grid-printable"
(gridReady)
浏览 1提问于2018-09-18得票数 0
我的页面上有一个标题<h4>Big offer!</h4>，当我第一次运行测试时，我得到了：
Expected: "Big offer!"
Received: <h4>Big offer!</h4>
35 | const switchToggle = screen.getByRole('checkbox');
36 | expect(switchToggle.checked).toEqual(true);
> 37 | expect(titleEl).toEqual(titl
浏览 4提问于2022-05-27得票数 0
回答已采纳
1回答
我有一个函数来更改角组件类中DOM元素的类名。我发现一个错误
属性样式不存在于类型元素上。
在尝试建造的时候。生成存在状态代码2，然后npm不运行。
然而，如果我删除这个功能，npm可以正常工作，并得到页面。然后，一旦重新引入代码，一切都正常。
以下是组件代码
import { Component , AfterViewInit } from '@angular/core';
declare var Handsontable: any;
@Component({
selector: 'fsiapp',
templateUrl: "/t
浏览 4提问于2017-04-14得票数 1
回答已采纳
因此，每当我提交基于引导的表单时，我都会尝试捕捉我的单选按钮的值。我尝试使用普通的JavaScript在我的component.ts文件中提取这个值，但是在VSCode中我得到了一个编译错误，如下所示：
类型'HTMLElement‘上不存在属性'checked’。
浏览器：
TS:
HTML:
如何以我的形式获得这个单选按钮的值？到目前为止，我一直在避免使用ngModel，因为我不确定这是否需要在TS文件中设置一个新属性或向该TS文件中添加另一个导入。对此功能的任何帮助都是非常感谢的。
浏览 1提问于2020-12-16得票数 0
回答已采纳
在下面的代码片段中，筛选器函数不起作用。组件HTML：
<div class="products-page">
<div class="grid">
<div class="col-3">
<h4>Categories</h4>
<div class="p-field-checkbox" *ngFor="let category of categories">
<label for="{
浏览 5提问于2022-01-18得票数 0
2回答
如何在TypeScript输入字段中选择文本。
在Javascript中，这个wpuld如下所示：
document.getElementById('id').select();
但是TypeScript不支持select (错误:在‘HTMLElement’类型上不存在ts属性'select‘)。
一些人认为:这可能是一个问题，我使用dx控件，它们创建了一个包装器。在html中可以看到：
<dx-text-box _ngcontent-c1="" id="test" ng-reflect-disabled="false&#
浏览 11提问于2017-11-15得票数 4
回答已采纳
实际上如下所示:我希望原生HTML input标记扩展原生和typescript属性
示例:发自：
<input type="checkbox"
formControlName="aComponent"
name="aComponent"
[checked]="data.get('aComponent').value">
至：
<my-input type="checkbox"
formControlName=&#
浏览 0提问于2019-02-26得票数 0
使用角4(打字本)，我有以下HTML代码：
<div *ngIf="dataService.selected_markers.length == 0" id="tsnPasteContainer">
<form style="width: 100%; height: 100%">
<textarea id="tsn_list" style="width: 100%; height: 100%" type="text" name="t
浏览 15提问于2017-07-11得票数 6
回答已采纳
2回答
在js中动态更改颜色
、、、、
我有一个json文件，我在其中存储我的数据以生成某种图表。我希望能够根据json中的属性有条件地更改图表的颜色。当它是假的时候，颜色应该是红色，当它是真的时，它应该是绿色的。这是我的json文件：
"children": [
{
"children": [
{
"children": [],
"id": 50,
"name": "gfj",
"checked": t
浏览 1提问于2021-11-19得票数 1
我正在将我的角度html模板转换为pdf，但生成的pdf是完全空白的。我用jspdf和html2canvas来生成pdf。
openPDF() {
let DATA = document.getElementById('print-paper');
if (!DATA) {
return;
}
html2canvas(DATA).then((canvas) => {
let imgWidth = 208;
let pageHeight = 295;
let imgHeight = (can
浏览 0提问于2021-05-12得票数 0
我见过许多有角度的2页，它们在nativeElements的层次结构中循环。它们不工作在角4，5，.我需要向“工作区”DIV添加一个指令。将有其他Divs是工作区的父级，其他则是嵌套到任意级别的子DIVs。这个指令必须检测“工作区”div或任何嵌套div的鼠标单击，我必须确定它实际上是nest子空间或工作区--而不是工作区或外部工作区上的其他div。
这是从网络上的许多例子中的一个得到的：
import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector
浏览 0提问于2018-02-14得票数 0
回答已采纳
2回答
尝试从Windows内部选中并取消选中c#上的一个复选框。我只知道如何更改元素if值，而不知道如果存在元素类值.在html中，我可以将类值从“未选中”更改为“选中”。但我不知道如何从windows内部的c# webBrowser中实现这一点。对不起，我的英语有限。谢谢。
我试过的
webBrowser1.Document.GetElementById("signup-termservice").SetAttribute("unchecked", "checked");
如果我可以将这个类的值更改为未选中，就可以了.
<span class=
浏览 0提问于2019-04-25得票数 2
回答已采纳
我有下面的javascript和html，它允许我点击一个按钮来编辑文本，如果有多个按钮，如何使它与angular2一起工作呢？
<button>Button Text Could Be Editable</button><br />
<button (click)="modifyText()" data-edit="0">Edit Button Above</button>
<script>
function modifyText() {
this.previousElementSibl
浏览 5提问于2017-04-28得票数 0
回答已采纳
1回答
我正在尝试在我的应用程序中实现TinyMce。好的，tinymce显示的很好，但是当我从tinymce页面路由到另一个页面时，它会抛出一个错误，如下所示。我的代码行中遗漏了什么？谢谢
误差
Uncaught (in promise): TypeError: elem is null
[650]/EmailComponent.prototype.ngOnDestroy@http://localhost:4200/main.bundle.js:1794:9
anonymous/Wrapper_EmailComponent.prototype.ngOnDestroy@/AppModule/Ema
浏览 3提问于2017-03-07得票数 1
回答已采纳
在angular 4中保存记录后，如何将焦点集中在特定元素上？在JQuery中有focus()和select()。在angular中与此类似的是什么？
浏览 0提问于2017-11-06得票数 1
据我所知，Angular试图将每个HTML元素视为一个组件，并允许绑定到它的属性。因此，如果我查看类，我可以看到它从Node继承了textContent属性，从Element继承了innerHTML属性，因此可以绑定到以下属性：
<div [textContent]="text"></div>
<div [innerHTML]="html"></div>
这很好，但是HTMLDivElement还有很多其他属性。如何知道可以绑定到哪些其他属性？也许在源中声明了一个接口来定义要绑定到的属性？
元素支持的事件列表也是如
浏览 5提问于2017-02-07得票数 2
回答已采纳
1回答
@import '../../main-styles.scss';
.note-card-container {
position: relative;
background: white;
border-radius: 5px;
box-shadow: 0px 2px 15px 2px rgba(black, 0.068);
transition: box-shadow 0.2s ease-out;
margin-top: 35px;
&:hover {
cursor: pointer;
box-shadow: 0px
浏览 5提问于2021-04-10得票数 1
回答已采纳
我得到一个‘type 'HTMLElement | null’不能赋值给类型'HTMLElement‘。我正在尝试在angular中验证一个电子邮件地址onkeyup事件。 import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-mynform',
templateUrl: './mynform.component.html',
styleUrls: ['./mynform.component.css&
浏览 528提问于2021-08-23得票数 0
我使用的是Angular 5.x模板，但我使用 guide将其升级到Angular 6。现在，我的构造函数中出现了这个错误
Typescript Error: TS2314: Generic type 'ElementRef<T, any>' requires 2 type argument(s)
我的代码：
import { Component, Input, Output, EventEmitter, ElementRef, HostListener } from '@angular/core';
@Component({
浏览 0提问于2018-06-06得票数 5
回答已采纳
2回答
我正在建立一个离子2项目的打字稿。我有以下css：
.bottle {
background: linear-gradient(0deg, pink 100%, white 0%);
}
我想从Javascript / typescript中调整线性梯度上的pink值，我已经在我的类型记录中做了下面的工作，但是我发现bottleFill上不存在样式元素。我做错了什么？
import {Page, Alert, NavController} from 'ionic-angular';
@Page({
templateUrl: 'build/pages/h
浏览 5提问于2016-03-15得票数 0
4回答
我对如何获得一个角度元素的属性感到困惑。我使用的是Angular材质，在中，它们描述了mat-button-toggle如何拥有一个名为checked的属性，该属性用来表示按钮是否被选中。所以在我的脑海中有这样一个元素：
<mat-button-toggle id="100"> Button </mat-button-toggle>
我应该能够做一个
let element = document.getElementById("100");
let checked = element.checked;
但是，checked变量显示为und
浏览 0提问于2019-09-05得票数 0
我正在尝试根据用户想要看到的内容，在一个非常长的列表中切换项目的查看类别。我想要切换查看所有内容，只查看会议、只查看事件或什么都不查看。(这是一个小例子，我真的有大约15个类别) <ul>
<li class="cal-meeting">meeting title</li>
<li class="cal-event">event title</li>
<!-- … the list goes on with various events and meetings --> 因此，我有以下复选
浏览 18提问于2019-10-13得票数 3
我在试着进入Angular2-Multiselect-下拉vesrion 4.6.3。
在这里，我想打开下拉菜单的外部按钮点击。
<angular2-multiselect
[data]="dropdownList"
[(ngModel)]="selectedItems"
[settings]="dropdownSettings"
#dropdownRef>
</angular2-multiselect>
<button (click)="openDropdown
浏览 2提问于2020-09-16得票数 0
回答已采纳
我正在尝试在电台和广播组上绑定一个react钩子表单。然而，我得到了以下问题 Property 'Group' does not exist on type 'ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>'. TS2339 这是代码 import { Radio as $Radio } from 'antd';
import { RadioProps, RadioChangeEvent } from 'an
浏览 552提问于2021-01-18得票数 0
2回答
我有一个函数，它接受页面上的一个元素，并将CSS添加到其样式属性中。我希望传递给它的参数是一个带有键的对象，比如height、minWidth、flexDirection等。
function addStyle (el: HTMLElement, style: Style): void {
for (const property in style) {
el.style[property] = style[property]
}
}
我的问题是输入这个对象。显然，自己定义每一个CSS属性是不可行的。我非常确定TypeScript应该能够自己做到这一点，但我不确定如何做到。这是我
浏览 0提问于2020-11-07得票数 3
我正在尝试将JavaScript转换为TypeScript。我在寻找关于“递归”或“嵌套”接口等问题的答案，但没有找到有用或可理解的答案。
以下结构坚决反对我以前的尝试：
interface iROGeneric<T> {
readonly [key: string]: T | iROGeneric<T>;
};
const Html: iROGeneric<HTMLElement> = {
body: document.querySelector<HTMLElement>("body"),
head:
浏览 3提问于2020-10-05得票数 0
回答已采纳
7回答
我工作的角度4，我有一个复选框的列表，在页面加载将被选中。当选中任何复选框时，都会启用删除按钮。
hero.component.html
<div *ngFor="let hero of heros">
<span>
<input type='checkbox' name='drama' (click)='selectedHero()' />
</span>
<span>hero.name</span>
</div
浏览 4提问于2018-05-30得票数 1
回答已采纳
问题与此相同：
但只适用于不同的框架。
我需要这件2+角服。目前我使用的是角9
public CheckBoxChange(event: Event) {
this.service.change(this.d!.id.toString(), event.target.checked).subscribe(res => {
console.log(res
}, err => {
console.log(err)
})
}
问题就在这里，event.target.checked
错误消息：
类型‘EventTarget’..t
浏览 13提问于2021-04-06得票数 8
当用户在一些div上停留几毫秒时，我想创建一个简单的对象信息工具提示。所以，我正在做一些测试来尝试在Angular 6中处理鼠标事件。这是我目前在Angular组件中得到的结果：
HTML模板：
<div (mouseenter)="showObjectInfo($event)"
(mouseleave)="clearObjectInfo($event)" [attr.data-item]="item.id">
组件TS：
showObjectInfo(e : any) {
console.log('<<&
浏览 0提问于2018-05-22得票数 1
在我的Angular项目Typescript代码中，我得到了错误： Object is possibly 'null' 在这一行上： document.querySelector<HTMLElement>('.highlighted').style.backgroundColor = 'white'; 如果我将?添加到上面的行，如下所示： document.querySelector<HTMLElement>('.highlighted')?.style.backgroundColor = 'wh
浏览 243提问于2021-02-04得票数 1
这段代码中变量"element“的类型是什么？我以为它是一个数字( ID之类的)，但现在，我不知道了。代码可以工作，但我不明白为什么var元素可以在for循环中使用，就像数组一样。对此有什么解释吗？
<script type="text/javascript">
function showAtrributes() {
var element = document.getElementById("videos");
var listAttributes
浏览 0提问于2017-06-19得票数 3
2回答
我正在创建一个名为text的React组件，它允许更改将要呈现的标记。
export interface TextProps extends HTMLAttributes<HTMLElement> {
children: ReactNode;
as?: React.ElementType;
}
问题是我尝试使用这样的time元素：
<Text as="time" dateTime="2018-07-07">
July 7
</Text>
但是TS编译器抱怨Property 'dateTime' do
浏览 14提问于2021-02-15得票数 0
回答已采纳
1回答
错误赋值变量类型
、、
恐怕我不确定这是关于WebStorm，Angular2还是类型记录的问题。
我已经设置了一个Angular2构建，并且正在使用WebStorm 2016.1.2进行编辑。我的一个组件使用简单的document.getElementById('some-el');获取对DOM元素的引用，并将其传递给服务方法：
calc(el:HTMLElement){
this.height = el.offsetHeight;
this.width = el.offsetWidth;
let span:HTMLElement = el.querySelector(&#
浏览 7提问于2016-05-29得票数 0
回答已采纳
2回答
如何在类型记录中设置复选框属性
、、、、
我正在尝试获取表中一组复选框的选中值。我的情况就像
列出表中的所有记录，每一行都有一个复选框
<td><input type="checkbox" value="{{my.id}}" /></td>
我在表标题处有一个复选框，用于为所有表复选框切换true/false。
<th><input type="checkbox" id="checkAll" (click)="changeCheck()" [(ngModel)]="che
浏览 5提问于2017-04-19得票数 2
回答已采纳
5回答
我有一个html input元素，需要使用两个单独的regex (Java)从其中提取名称和值。
<INPUT type="hidden" id="Region" value="Circuits Japan" checked="false">
我需要从上面提取区域和电路日本使用2个不同的正则表达式。
对于id提取，我使用了类似这样的.*id=(.[^"]+)，它给出了
Region value=Circuits Japan checked=false>
而我只想提取"Region“。我们将非常感谢
浏览 4提问于2012-02-07得票数 1
回答已采纳
1回答
新的TypeScript，并试图从js转换为ts (使用角1.x)。这是一个控制器。转换成ts有问题。“模块”是ui路由器状态提供程序上的自定义数据元素。
(function(module) {
"use strict";
module.controller("aboutController", [
"$state",
function($state) {
var vm = this;
// pass the module to the service
浏览 1提问于2015-10-13得票数 0
2回答
我在angularjs中有一个指令，它工作得很好，但是它使用了jQuery，现在我想把它转换成Angular 4
旧指令(AngularJS)
app.directive('errName', function () {
return {
link: function (scope, element, attrs) {
element.bind('error', function () {
if (attrs.src != attrs.errName) {
浏览 5提问于2017-08-09得票数 0
回答已采纳
4回答
我正在使用，也就是中的web组件。问题是，类型记录抱怨没有在JSX.IntrinsicElements中定义元素--在本例中是check-box元素：
<div className={styles.option}>
<check-box checked={this.prefersDarkTheme} ref={this.svgOptions.darkTheme}/>
<p>Dark theme</p>
</div>
错误消息(省略路径)：
ERROR in MyComponent.tsx
[tsl] ERROR in
浏览 12提问于2020-04-03得票数 13
我正在学习typescript，并试图从Microsoft Fluent UI实现一个detailList组件，但我遇到了一些麻烦： Type '(ev: React.MouseEvent<HTMLElement>, checked: boolean) => void' is not assignable to type '(event: MouseEvent<HTMLElement, MouseEvent>, checked?: boolean | undefined) => void'. 在代码中，单击切换按钮时会引用一
浏览 25提问于2021-01-07得票数 0
回答已采纳
我需要在ngfor循环中自动聚焦一个元素。
这是我的chat.component.html
<div *ngFor="let chat of chats; let last = last">
{{ chat.chat }} <span *ngIf="last;" autofocus></span>
</div>
实际上，通过使用按钮单击我正在显示此聊天弹出窗口，我需要自动聚焦最后一次聊天。
我的chat.ts文件
import { Component, OnInit } from '@angular/
浏览 0提问于2017-09-11得票数 4
您好，我正在尝试使用viewChildren和elementRef从html中获取数据(在ngFor之后提取出来)，但我正在获取
Cannot read property 'nativeElement' of undefined
我做错了什么？我也在使用ngAfterViewInit
这些是我的代码(html)
<div id="tutor-price" #myDiv (click)="passCharge(r.value['charge'])"><span id="month">8 Tim
浏览 24提问于2017-07-11得票数 2
我有一个angular8材料mat- form -field，它的输入类型为‘text’，当数据输入到该表单上的任何其他字段时，该输入类型将被禁用。
const fnDe: DebugElement = fixture.debugElement.query(By.css('input[type=text]')).nativeElement;
expect(fnDe.attributes).toContain['disabled'];
在运行测试时，我收到了“规范没有期望”的信息。
我正在使用angular8。
感谢任何人的帮助。
浏览 13提问于2019-11-21得票数 0
1回答
我正在学习Angular 2.0.0版本中的新特性和变化。我在获取测试组件中HTML元素的文本内容时遇到了问题。
这是我要测试的组件
import {
Component,
Input,
Output,
EventEmitter
} from '@angular/core';
@Component({
selector: 'note-card',
template: `
<div
class="note-card row shadow-1"
[ngStyle]="{'
浏览 2提问于2016-10-02得票数 0
我正在尝试获取图像(屏幕上的图像)和 returned (单击按钮)的返回值。即: returnedEmotions)。我想将它们放入makeMatch()函数中，但它们要么以未定义的形式出现，要么在dashbaord组件中出现。我尝试过让makeMatch()在ngOnInit的内部和外部使用，但仍然没有任何进展。有什么建议吗？提前谢谢。
另外，我希望这些是检查何时图像A在屏幕上，如果用户点击情感A/情感B等。
dashboard.component.ts
import {Component,Input,OnChanges,OnInit,SimpleChanges} from '@a
浏览 1提问于2018-04-03得票数 0
2回答
我正在使用WebStorm并遇到以下问题：
/** @type {HTMLCanvasElement} */
var buffered_canvas = document.createElement("canvas");
buffered_canvas.width = 256;
buffered_canvas.height = 256;
当我将buffered_canvas注释为HTMLCanvasElement类型时，它会抱怨createElement返回不能分配给HTMLCanvasElement的HTMLElement。
/** @type {HTMLElement} *
浏览 4提问于2014-12-12得票数 5
回答已采纳
我正在做一个使用mapbox gl的角度项目，我想将我当前的位置添加到我的地图中。我查看了他们的文档，并找到了的方法，但代码在我的angular project.It中不起作用，总是给我上面的错误。我是mapbox和angular的新手，请帮助我。
import { Component, OnInit,AfterViewInit } from '@angular/core';
import mapboxgl from 'mapbox-gl'; // or "const mapboxgl = require('mapbox-gl');&
浏览 5提问于2020-11-24得票数 0
我真的需要帮助来解决这个错误。我在下面编写了下面的JavaScript代码，以使我的选项卡指示器在单击时显示在一个单击的选项卡上，但我所得到的只是一个错误：“属性‘样式’在类型‘Element’上不存在”。标签工作非常好，我可以从一个选项卡切换到另一个选项卡。我也看到过类似的问题，但我的问题并没有按照他们的主要建议得到解决。我目前正在构建一个角项目，并在我的JavaScript文件中用ngInit(){}函数编写了我的.ts。守则如下：
ngOnInit() {
let tabPanes = this._class('tab-header')[0].getElement
浏览 34提问于2022-02-06得票数 0
回答已采纳
我正在尝试在Angular中的特定元素上应用滚动。我知道如何做它，并能够做它，但由于我需要在许多组件中使用它，我正在尝试创建一个可重用的组件，它将包含项目列表。 在点击到特定列表时，我想滚动到div到parent中的特定元素，但不知何故我无法访问parent中的模板引用变量。 我怎么才能让它工作呢？我提供了一个Stack Blitz： https://stackblitz.com/edit/angular-mwwfwk 在单击子列表中的任何项目时，我会出现以下错误 AppComponent.html:47 ERROR TypeError: el.scrollIntoView is not a
浏览 22提问于2019-12-29得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
