¿Alguien sabe por qué document.getElementById("startDateText") devolverá un valor nulo desde el elemento de párrafo a continuación, pero si muevo esa identificación al elemento de arriba, volverá como lo esperaba?

El código de TypeScript se dispara desde un botón y no está incrustado en JavaScript en el HTML.

   <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>

TypeScript:

 const myElement: HTMLElement = document.getElementById("startDateText");
 myElement.innerHTML =this.eventDetail$.StartDateTime;
4
DarkW1nter 16 oct. 2018 a las 16:55

2 respuestas

La mejor respuesta

ngIf no solo "ocultará" el elemento, sino que lo eliminará de DOM, por lo que no podrá acceder a él si isDates==true.

Sugerencia :

En su lugar, podrías usar [class.hidden]="!isDates". La clase oculta es la combinación de las dos propiedades de estilo: visibility=0 y display:None, por lo que el elemento se mantendrá en el dom, pero no se renderizará.

4
madjaoue 16 oct. 2018 a las 14:07

NgIf elimina el elemento del DOM si el valor de la variable !isDates es falso y, por lo tanto, myElement será nulo. Puede usar el atributo [hidden] u ocultar el elemento según la condición a través de css como solución.

Pero en general document.getElementById no es una forma angular

1
Franklin Pious 16 oct. 2018 a las 14:07