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

【问题标题】：Angular 6 TypeScript getElementById returning null when element does exist当元素确实存在时，Angular 6 TypeScript getElementById 返回 null
【发布时间】：2018-10-16 22:07:19
【问题描述】：

有谁知道为什么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;

【问题讨论】：

*ngIf="!isDates" 你能把它删掉再试一次吗？ ngIf 不仅会“隐藏”元素，还会将其从 dom 中移除，因此如果 isDates 是 true，您将无法访问它。但是，可能还有别的东西。
是的，当我删除 ngIf 时它会找到元素，我想我需要更改我的显示方式，谢谢
您可以改用[class.hidden]="!isDates"。隐藏类是visibility=0和display:None这两个样式属性的组合，所以元素会保留在dom中，但不会被渲染。
或者你可以使用 [attr.hidden]

标签： angular html typescript

【解决方案1】：

ngIf 不仅会“隐藏”该元素，还会将其从DOM 中移除，因此如果isDates==true，您将无法访问它。

建议：

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

【讨论】：

【解决方案2】：

ngIf 如果变量 !isDates 的值为 false 则从 DOM 中删除元素，因此 myElement 将为空。您可以使用[hidden] 属性或通过css根据条件隐藏元素作为修复。

但通常 document.getElementById 不是 Angular 方式

【讨论】：