时间戳

首页 > 解决方案 > 当元素确实存在时，Angular 6 TypeScript getElementById 返回 null

angular - 当元素确实存在时，Angular 6 TypeScript getElementById 返回 null

问题描述

有谁知道为什么document.getElementById("startDateText")会从下面的段落元素返回 null，但是如果我将该 id 移动到它上面的元素，它会返回我期望的结果？

Typescript 代码是从按钮触发的，而不是嵌入在 HTML 中的 javascript。

   <p class="card-text text-secondary">Start Date and Time</p>
   <p *ngIf="!isDates" class="card-text text-secondary" id="startDateText"  >{{ Detail$?.StartDateTime | date:"MM/dd/yyyy 'at' h:mma" }}</p>

打字稿：

 const myElement: HTMLElement = document.getElementById("startDateText");
 myElement.innerHTML =this.eventDetail$.StartDateTime;

标签： angularhtmltypescript

解决方案

ngIf不仅会“隐藏”元素，还会将其从 中删除DOM，因此如果isDates==true.

建议：

你可以[class.hidden]="!isDates"改用。隐藏类是两个样式属性 :visibility=0和的组合display:None，因此元素将保留在 dom 中，但不会被渲染。

推荐阅读