全部
技术
PHP
MySQL
前端
Linux
JAVA
工具
纪念日计算器
邮记星
个人记账
笔记侠
历史上的今天
生日密码
生日书
生日密码
生日花语
博古通今
三十六计
鬼谷子
笑林广记
本草纲目
山海经
唐诗宋词
宋词300首
唐诗300首
退出
登录
注册
编辑文章
选择分类
PHP
MySQL
前端
Linux
Java
工具
选择专栏
设计模式
java基础
Angular学习
Java面试题
描述:
Cannot read property 'appendChild' of null
封面图上传 :
+
点击上传图片
angular 通过document.getElementById('c1');获取html元素报错,具体如下: ```js core.js:4352 ERROR TypeError: Cannot read property 'appendChild' of null at new Chart (chart.js:19) at Line.push.zJSt.Plot.createG2 (plot.js:27) at Line.Plot [as constructor] (plot.js:18) at new Line (index.js:9) at DisplayboardComponent.chartData (displayboard.component.ts:48) at DisplayboardComponent.ngOnInit (displayboard.component.ts:25) at callHook (core.js:3105) at callHooks (core.js:3075) at executeInitAndCheckHooks (core.js:3027) at refreshView (core.js:7333) ``` 百度了一下原因是你获取的节点不存在引起的。分析发下我这个是动态加载组件,可能加载完后,页面上还没有该组件的html元素,于是获取不到,最后找到angular的一个ElementRef来获取元素,具体如下: **//原先获取方式 const c1 = document.getElementById('c1'); //修改后获取方式 const c2 = this.elRef.nativeElement.querySelector('#c1');** ```js import { Component, ElementRef, OnInit } from '@angular/core'; @Component({ selector: 'app-XXX', templateUrl: './XXX.component.html', styleUrls: ['./XXX.component.scss'] }) export class XXXComponent implements OnInit { constructor(private elRef : ElementRef) { } ngOnInit(): void { //原先获取方式 const c1 = document.getElementById('c1'); //修改后获取方式 const c2 = this.elRef.nativeElement.querySelector('#c1'); } ```
保存文章