代码之家 › 专栏 › 技术社区 › yer

以组件中ID为目标的元素

dom typescript angular jquery

yer · 技术社区 · 7 年前

我想在角4中实现类似的东西。

$('dataBlock').empty();

如何使用组件中的ID访问DOM元素?当我尝试以下操作时,我得到了一个错误消息 Cannot read property 'nativeElement' of undefined

<div id="dataBlock"></div>

组件.ts

@ViewChild('dataBlock') block: ElementRef;

getGraphdata(){
    **code to get data and implement a graph**
    this.dataBlock.nativeElement.empty();
}

1 回复 | 直到 7 年前

ConnorsFan 7 年前

您可以使用标准的javascript方法通过 id :

document.getElementById("dataBlock").innerHTML = "";

然而,在角度上,引用元素的首选方法是 template reference variable :

<div #dataBlock></div>
<button (click)="dataBlock.innerHTML = ''">Clear content</button>

该变量还允许在 @ViewChild :

@ViewChild("dataBlock") block: ElementRef;

clearContent() {
  this.block.nativeElement.innerHTML = "";
}

推荐文章

Ezz Deghedy · 如何获取数据和读取响应

1 年前

StuP · 响应式Vue组件在数据更改时不更新

2 年前

burr · 让jQuery选择器识别新添加的DOM元素[关闭]

2 年前

viboven · Javascript DOM未从ID检测到按钮,表示其为null[已关闭]

2 年前

Toufique E Joarder · 将<li>移动到第n个位置并使用JavaScript更改href链接

2 年前

HASEEB ALAM RAFIQ · 如何在react中获取QuerySelector所有html元素?

3 年前

J. Hu · “表单提交已取消,因为表单未连接”[重复]

7 年前

pploypiti · 选择所有其他ID不是“this”的元素。id'

7 年前

xiaolingxiao · 导航到页面后运行javascript

7 年前

Voodoobear · 如何将数字变量插入replaceWith(JavaScript)

7 年前