错误TypeError:尝试更改标签(Typescript / HTML / Angular)的InnerHtml属性时，无法将属性'innerHTML‘设置为null
错误TypeError:尝试更改标签(Typescript / HTML / Angular)的InnerHtml属性时，无法将属性'innerHTML'设置为null。
这个错误是由于尝试将一个null值赋给HTMLElement的innerHTML属性引起的。innerHTML属性用于获取或设置HTML元素的内容。然而，它不接受null值作为有效的输入。
解决这个问题的方法是在赋值之前先检查要设置的值是否为null。可以使用条件语句或三元运算符来处理这种情况。以下是一个示例代码：
const element = document.getElementById('myElement');
if (element) {
const content = getContent(); // 获取要设置的内容
element.innerHTML = content !== null ? content : '';
}在上面的代码中，我们首先通过getElementById方法获取到要操作的HTML元素。然后，我们使用条件语句检查要设置的内容是否为null。如果内容不为null，则将其赋给innerHTML属性；如果内容为null，则将innerHTML属性设置为空字符串。
在Angular中，可以使用属性绑定来设置HTML元素的内容。以下是一个示例代码：
<div [innerHTML]="content !== null ? content : ''"></div>在上面的代码中，我们使用属性绑定将表达式的结果赋给div元素的innerHTML属性。表达式检查要设置的内容是否为null，如果不为null，则将其赋给innerHTML属性；如果为null，则将innerHTML属性设置为空字符串。
总结：
- InnerHTML属性用于获取或设置HTML元素的内容。
- 尝试将null值赋给HTMLElement的innerHTML属性会导致TypeError错误。
- 解决这个问题的方法是在赋值之前先检查要设置的值是否为null。
- 可以使用条件语句或三元运算符来处理这种情况。
- 在Angular中，可以使用属性绑定来设置HTML元素的内容。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 区块链服务（TBC）：https://cloud.tencent.com/product/tbc
- 腾讯云元宇宙：https://cloud.tencent.com/solution/metaverse
相关·内容
1回答
我正在尝试将一个typescript变量传递给一个html页面。
所有的代码都在上，并在上运行。
我在上使用了一个简短的示例
这应该允许我将typescript变量放入DOM中，但它不起作用。
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
如果这是不可能的，那么可以在DOM中放置一个模板变量？例如可以用Angular2+来完成，
{{ variable }}
浏览 2提问于2018-01-07得票数 0
回答已采纳
我正在尝试使用Angular 6开发基于json的动态模板。
在一些用例中，我希望使用css加载外部html (可能是来自DB的文本)和css(作为DB的文本的单独文件)，并将其用于相应的路由器插座html。
对于ex，我们需要一个用于以下路由的home.html和home.ts文件。我没有将html代码放在home.html中，而是考虑将其作为文本从DB加载并显示出来。在这里，我想得到相应的css代码也从DB没有硬编码的css代码在html。
此外，我需要在一个单独的文件中使用相应的JavaScript函数(例如，对于动态html，我可能有一个删除链接或取消链接)。它将类似于typescri
浏览 8提问于2018-08-01得票数 2
角8: TypeError:在构建生产代码时，无法读取未定义的属性“种类”
Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
TypeError: Cannot read property 'kind' of undefined
at isAngularDecoratorMetadataExpression (/home/Project/node_modules/@angula
浏览 6提问于2020-07-22得票数 0
回答已采纳
如何在类中创建TypeScript静态常量？这意味着我可以在不初始化类的情况下引用一个常量。这是我的班级： export class CallTree{
public static readonly active = 1;
............................
} 组件的html如下所示： <table mat-table [dataSource]="callTreeList" matSort class="mat-elevation-z8 callTreeList">
................
浏览 60提问于2019-12-23得票数 1
回答已采纳
8回答
为什么我想制造这个问题？
、、、、
./node_modules/ng2-pdf-viewer/fesm5/ng2-pdf-viewer.js模块构建失败(来自./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js)：TypeError:无法读取未定义isAngularDecoratorMetadataExpression的属性“种类”) (E:\Mohamed Mostafa Work\new_project\reservation\node_modules@angular-devkit\build-optimiz
浏览 4提问于2020-03-09得票数 4
回答已采纳
我在我的应用程序中使用typescript。
html代码：
<input type="text" name="lastname" id="last">
打字代码：
let myContainer = <HTMLElement>document.getElementById('last');
myContainer.innerHTML = "";
我想使用typescript为姓氏字段设置空值。我正在使用上面的代码。但无法使用typescript添加空值。
我也尝试过使用下面的代码：
doc
浏览 13提问于2017-08-16得票数 3
回答已采纳
我们有很少的html pages.We从数据库中获取这些HTML页面的内容，但是标签存在于file.We中，我们使用innerHtml (属性绑定)来将内容呈现为Html标签。
我想在Angular应用程序中呈现来自数据库的整个HTML页面。
有没有什么方法可以让我从后端和HTML标签一起拉取数据，并在Angular中呈现这些数据？
浏览 32提问于2021-05-14得票数 0
我尝试用角CLI ng build --prod构建项目，并得到了以下错误：
TypeError中的错误:无法读取未定义的属性“类别”
如果我使用非--prod 构建，则不会得到任何错误。
完全错误：
ERROR in TypeError: Cannot read property 'kind' of undefined
at isParameterPropertyDeclaration (node_modules/typescript/lib/typescript.js:13445:88)
at Object.filter (node_modules/
浏览 7提问于2019-09-11得票数 16
回答已采纳
当我试图用幻影运行业力测试时，如果我有另一个node_modules的例子的话，我就有问题了。
例如：
MyComponent
└── node_modules
└── examples
└── node_modules
└── src
└── app
└── app.component.ts
└── app.component.html
└── app.component.css
└── app.component.spec
└── app.
浏览 1提问于2017-03-14得票数 0
代码片段如下： private mDialog: MatDialog,
const dialog = new MatDialogConfig();
msg = "I love Angular.\r\n I want to code typescript."
dialog.data = {
message:msg
};
alert (msg);
mDialog.open(ABCCustomDialogComponent, dialog); 当我尝试警告字符串msg时。它在警告消息窗口中显示换行符，如下所示： I lo
浏览 41提问于2020-06-11得票数 1
回答已采纳
1回答
在使用templateUrl测试组件时，我发现了这个错误。我不知道该怎么解决它。
在阅读完一篇文章后，我在测试文件中添加了TestBed.resetTestEnvironment()和TestBed.initTestEnvironment()，但这并没有解决问题。似乎配置文件中缺少某些内容，无法加载html文件。
以下是业力日志：
这是我的karma.config.js文件：
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine',
浏览 0提问于2018-03-13得票数 2
我正在尝试做以下几件事： import 'dart:html';
import 'package:angular/angular.dart';
import 'package:markdown/markdown.dart' as md;
@Directive(selector: '[markdown]')
class MarkdownDirective {
@Input('markdown')
String marked;
MarkdownDirective(Element el) {
浏览 21提问于2019-02-28得票数 0
回答已采纳
17回答
为什么我得到一个错误或未捕获TypeError:无法设置属性'innerHTML‘的null？我想我已经理解了innerHTML并且之前已经让它工作过了。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type ="text/javascr
浏览 64提问于2013-08-15得票数 123
回答已采纳
<html>
<head></head>
<body>
<button type="submit" onclick="callMe()">show</button>
<div id="name"></div>
<div id="age"></div>
<div id="reservedStatus"></div>
<script src="index.js&
浏览 23提问于2019-02-22得票数 2
2回答
无光TypeError
、、、
有人能解释一下这些错误是什么吗？
Uncaught :无法设置属性'innerHTML‘为null
Uncaught :无法读取属性‘样式’的null
未登录的SyntaxError:意外令牌非法
未明的TypeError:对象#没有方法'dispatchEvent‘
这是我的测试
浏览 3提问于2011-05-11得票数 0
回答已采纳
我使用的是角2.0.0-β.0和TypeScript 1.7.5。当试图更改聪明的过滤器时：
只有当用户停止打字时，“聪明”过滤器才能做一些事情。
我得到编译错误：
Error:(30, 20) TS2345: Argument of type '(term: string) => void' is not assignable to parameter of type '(x: {}, ix: number) => Observable<any>'. Type 'void' is not assignable to t
浏览 1提问于2016-02-22得票数 2
回答已采纳
我在努力学习ngOnChanges。
世界上最小的角模板驱动形式：
<form (ngSubmit)="onSubmit()">
<input type="text" [(ngModel)]="hero" name="hero">
<input type="submit" value="Submit">
</form>
它的TypeScript组件类：
import { Component, Input, OnChanges, SimpleCh
浏览 5提问于2020-12-28得票数 0
回答已采纳
7回答
我正在尝试从JavaScript中获取DOM元素。尽管ID是正确的，但getElementId似乎找不到它；我得到了一个
TypeError:无法读取属性'innerHTML‘的null
在Chrome中，或者
TypeError: X为空
在Firefox中，只使用下面的简单代码。为什么会这样呢？
<!DOCTYPE html>
<html>
<head>
<script>
var x = document.getElementById("myHeader"
浏览 1提问于2010-04-26得票数 1
回答已采纳
1回答
我需要在2:00到0:00停止计时。但它在-1.59停止或开始递减。在angular typescript中，我写了上面的代码。我做错了什么：
<html>
<body>
<input type="text" name="otp" placeholer="Enter your otp"/>
<div>Time left = <span id="timer"></span></div>
</body>
</h
浏览 0提问于2018-05-31得票数 2
回答已采纳
在更新到角5:控制台错误："ERROR TypeError:无法读取未定义的HttpInterceptorHandler.handle (http.js:1777).‘的属性“之后，我们得到了错误。
未处理的承诺拒绝:无法读取未定义的属性的‘拦截’；区域：；任务: Promise.then；值: TypeError:无法读取未定义的属性‘截获’“
服务代码
import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest }
浏览 2提问于2017-11-09得票数 1
回答已采纳
研究错误，
“例外: TypeError: tagDef.requireExtraParent不是函数”
它实际上在Google上返回0的结果。
背景：
站点在Chrome和Safari上运行良好。还没测试过IE。那是完全不同的噩梦。
错误只适用于Firefox (似乎所有版本)。目前为45号)
我正在使用系统从TypeScript转换到ES5，接下来是角快速启动
如果这很重要的话
Angular2，β9
这个网站非常基础。我已经消除了所有可能的复杂问题，似乎错误只是在引导本身。也许是漏掉的填土？
index.html
<script>
Sy
浏览 4提问于2016-03-16得票数 1
回答已采纳
1回答
我已经实现了一个进度条，并通过使用document.getElementsByClassName访问进度条的宽度属性，在html中显示了进度条的百分比。但是我应该用什么在Angular 2中实现这一点，它使用typescript。
运行HTML和JS代码：
Angular 2代码(应修复)：
html代码：
<div class="container">
<div class="bar">
<span class="bar-fill"></span>
</div>
<
浏览 13提问于2016-07-27得票数 0
回答已采纳
嗨，我正在使用Angular 2+ Typescript，我想用类似于innerHTML的css和html显示文本输入。我试着这样做：
<input [innerHTML] formControlName="descriptionCtrl" matInput></input>
在输入中显示css和html的方法是什么？
编辑:我正在寻找一个富文本编辑器。
浏览 1提问于2021-02-22得票数 1
我从简单的Typescript(.ts)+HTML(.js)代码开始练习。在HTML页面中，我有以下标记来显示某些图像：
<img id="myimage" src='images/samsung_edge_silver.jpg' height="250px">
<div><b><span id="Name"></b></div>
现在我有了ts文件来修改代码中的字段。我可以使用以下命令更改span字段名称的值：
document.getElement
浏览 50提问于2019-07-19得票数 0
回答已采纳
我正在为angular 2使用angular-CLI，在我所有的angular 2项目中，在ng serve获取模块构建失败'Cannot read property newLine of undefined‘错误之后，我正在命令提示符中执行ng serve。
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (C:\Users\timebound\angularJson\node_modules\typesc
浏览 2提问于2017-02-09得票数 2
回答已采纳
当试图在新项目上执行命令ng serve时，如果没有代码更改，就会发生错误：
TypeError中的错误:无法读取未定义的属性“标志”
这是ng --version命令输出：
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_|
浏览 0提问于2020-05-08得票数 1
我正试图通过向app.module.ts全局导入送交函数来优化我的角4应用程序。我试过：
import { some } from 'lodash/fp/some';
import _ from 'lodash/wrapperLodash';
但是，我无法在组件中获得对该函数的引用。这将引发一个错误：
_.some(myVar, { lat: null });
我的依赖关系(与主题相关的)：
"devDependencies": {
"@angular/compiler": "^4.2.4",
"@angu
浏览 0提问于2018-03-06得票数 0
在角应用程序中，我无法从我使用dataSource创建的服务中读取。
ERROR TypeError:无法将未定义或null转换为对象错误TypeError:无法读取未定义的属性“getService”
component.ts
import { Component, OnInit } from '@angular/core';
import { RailroadAgreementService } from '../../services/railroad-agreement.service';
import { RRA_ID } from '../.
浏览 1提问于2019-12-03得票数 1
以前的系统中的工作正常，但是当在新系统中克隆项目时，现在我得到了这个错误.
I还尝试将“ng-select2 2”："^1.1.2“改为”ng-select2 2“："1.1.2"。
我试着从两天内解决并进行构建，但是得到相同的问题没有解决方案
有人能帮忙吗？但也有同样的错误。
当我发出build run命令( ng build )时，得到这个错误。
角CLI: 8.0.6
节点: 10.16.0
操作系统: win32 x64
角度: 8.0.3
dependencies
.
“ng-select2 2”："^1.1.2“
"ng-select2-co
浏览 5提问于2020-10-09得票数 0
回答已采纳
无法在ng构建上构建角项目-prod
ERROR in ./node_modules/ng2-material-dropdown/fesm5/ng2-material-dropdown.js Module build failed (from ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js): TypeError: Cannot read property 'kind' of undefined at isAngularDecoratorMetad
浏览 3提问于2020-12-28得票数 0
我正在开发一个应用程序，我在TypeScript上有下一节课。
我想尝试在“ModalController”中使用类型回调的方法获取数据，当它取消模式时：
import { Component, OnInit } from '@angular/core';
import {NavController, ModalController} from '@ionic/angular';
import { Router } from '@angular/router';
import { HomePage } from '../home/h
浏览 0提问于2019-05-08得票数 4
回答已采纳
我知道这种将用户的输入发送到typescript (angular)的方法：
<form >
<input #input type="text" [(ngModel)]="inputColor" (input)="sendInput(input.value)" />
</form>
但是它看起来不是很有效，我用#input创建了一个对DOM的引用，然后发送input.value。
毕竟，我对他指的是#input还是(input)=...;的input.value感到非常困惑。
归根结底，
浏览 2提问于2020-06-02得票数 0
我正在使用TypeScript，并试图创建一个脚本来获取带有类和id的div的HTML。
但是，我能够获得类的结果，但不能使用getElementById获取结果。
html看起来如下：
<button (click)="selectDiv()">select div</button>
<div class="container" id="main-wrapper">
<p>
Fetch me
</p>
</div>
和explore.ts文件
selec
浏览 10提问于2017-05-30得票数 0
回答已采纳
我在angular 4项目中使用ng服务器运行，得到错误。
Cannot read property 'length' of undefined
但是我的项目中没有任何属性长度..
完整的错误
Your global Angular CLI version (1.2.1) is greater than your local
version (1.1.3). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMi
浏览 0提问于2017-07-20得票数 21
1回答
我正在尝试实现一个指令，将标签替换为带有ng-click的标签。ng单击调用一个函数，该函数用另一个元素的内容替换div的内容(始终相同)，该元素的id作为参数传递。我设法使它工作，但只对第一次点击。在此之后，页面将被重新加载，这似乎是因为ng单击没有被触发，但是(空) href属性是。
html代码：
<!-- language: lang-html -->
<div id="uiMain" class="container">
Go to <go target="block01">01<
浏览 0提问于2019-06-19得票数 0
回答已采纳
我只想显示一个文本的50个字符，然后“阅读更多”，如果我点击，我将显示全文，我正在使用angular2，我正在尝试使用typescript，我离开了我的代码。
HTML：
<table width="200px">
<tr>
<td>
<div id="el_div">
uno dos tres cuatro cinco seis siete ocho nueve diez once doce t
浏览 0提问于2017-12-04得票数 0
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript Form Testing</title>
</head>
<body>
Name: <input type="text" name="Name" value="Name" id="fname"> <br>
Email: <i
浏览 0提问于2012-08-13得票数 0
回答已采纳
我有自己的脚本extraQU.js放在index.html中。
<script src="assets/extraQU/extraQU.js"></script>
在users.component.html中，我有：
<div [innerHTML]="someVar"></div>
在users.component.ts中，我有：
import { Component } from '@angular/core';
import { NavController } from 'ionic-
浏览 3提问于2017-12-28得票数 2
回答已采纳
我刚刚开始玩弄TypeScript。我已经用Visual Studio 2012 Web学习版创建了一个示例项目，这个示例有一行代码，我无法解释它的行为。
首先是TypeScript代码：
start() {
this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);
}
因此，这行代码每隔500ms设置一次timerToken的值，并用当前日期/时间更新一个HTML元素。
在JavaScript中，这等同于：
Greeter.prototype.start =
浏览 0提问于2013-04-18得票数 20
回答已采纳
2回答
在我的angular应用程序中，我尝试使用angular innerHTML将一个字符串绑定到一个div，这是字符串
sample = "<a routerLink='/tags/name/'>Test</a> smod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam";
这是html页面
<p [innerHTML]="sample"></p>
现在我的问题是，锚标签现在可以工作了，它只显示T
浏览 1提问于2020-07-13得票数 0
我有一个角-2应用程序。
我试图运行ng serve，但得到了以下错误：
ERROR in ./src/main.ts
Module build failed: TypeError: Cannot read property 'newLine' of undefined
at Object.getNewLineCharacter (/Users/eladb/WorkspaceQa/Gasolina/node_modules/typescript/lib/typescript.js:8062:20)
at Object.createCompilerHost (/U
浏览 1提问于2017-10-25得票数 0
回答已采纳
我收到错误“未捕获TypeError:无法将属性'innerHTML‘设置为null”
<html>
<body>
<table id="mytable">
</table>
<script>
function myfun() {
for (var i = 0; i < 2; i++) {
//call some function
somefunction(i, function(err, result) {
浏览 0提问于2018-03-15得票数 0
我是一个全新的角度4，并试图弄清楚一个简单的项目的基本结构。我已经测试了我的项目，昨天它运行得很好。但是今天，当我打开我的项目并想要做"ng serve“时，它显示了下面的错误。不知道问题出在哪里。
TypeError: Cannot read property 'length' of undefined
at createSourceFile (C:\Users\IR\Desktop\angular-first-project\node_modules\typescript\lib\typescript.js:15457:109)
at parseSourceFile
浏览 0提问于2017-06-13得票数 11
我发现如何在typescript (Angular 5)中创建html表，但我不知道如何将其添加到html代码中。我唯一看到的是对象表，我通过{{ HTMLTableElement }}在html代码中放置了一个表。
谢谢你的帮助。
我的表编码：
private table: HTMLTableElement;
private thead: HTMLTableSectionElement;
private tbody: HTMLTableSectionElement;
constructor() {
this.table = document.createElement
浏览 2提问于2018-01-18得票数 0
这是我的代码。我想显示登录表单上的登录单选按钮和类似的注册表单的注册单选按钮的点击。 我收到一个错误 _blank.html:21未捕获TypeError:无法在HTMLInputElement.onclick的loginUser读取null的属性“”append“” _blank.html:28未捕获TypeError:无法在HTMLInputElement.onclick的signupUser读取null的属性“”append“” function loginUser(logindiv){
console.log('login');
浏览 44提问于2020-09-02得票数 1
我正在做我的第一个打字稿项目。这个函数来自我以前做过的一个javascript项目，但是当我使用react-typescript时，我从函数中得到了两个innerHTML上的这个错误：
TypeError:无法将属性'innerHTML‘设置为null
function callGames() {
let bets = document.getElementById('bets-container-lotos');
bets!.innerHTML = '';
const games = gamesJson.length;
浏览 2提问于2021-08-20得票数 0
回答已采纳
我只是被TypeScript和Angular2弄湿了脚。我正在使用一个具有嵌套对象结构的API。我希望我的模型能够反映API中的资源。TypeScript中定义的模型/资源“查询”：
// inquiry.ts
export class Inquiry {
name: {
first: string,
last: string
};
email: string;
phone: string;
question: string;
}
我的表单组件是这样的：
import { Component, OnInit } from '@angular/core
浏览 2提问于2016-09-16得票数 0
回答已采纳
我在angular 2中设计了常用的打印功能。我写了一段类似下面的代码。
this.printconent = document.getElementById("eq-result-print").innerHTML;
if (window) {
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
var popup = window.open('', '_blank',
浏览 4提问于2017-07-24得票数 1
the javascript below is the line 13 and the h1 is my html tag index.js:13未捕获TypeError:无法在index.js:13处设置null的属性“”innerHTML“” <h1 id="text">javascript practice</h1>
document.getElementById('text').innerHTML = 'hey there';
浏览 20提问于2020-12-25得票数 2
回答已采纳
2回答
在我的同伴克隆这个项目并运行，npm命令之前，一切都很好。因此，我清理了我的node_modules，在我的env中复制了这个问题，然后我们都被困在这里。我们能做什么有什么建议吗？
tsc -v 2.1.1
错误日志：
错误在./src/polyengus.Browser.ts模块构建失败: TypeError:无法读取未定义属性的“排除”在applyDefaults，at Object.ensureInstance (/Users/georgelin/Desktop/workspace/myApp/Jelly-Node/client/node_modules/awesome-typescr
浏览 1提问于2016-12-19得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
