Angular 6 TypeScript getElementById, возвращающий ноль, когда элемент существует

Question

Кто-нибудь знает, почему document.getElementById("startDateText") вернет ноль из элемента абзаца ниже, но если я переместу этот идентификатор в элемент над ним, вернусь так, как я ожидал?

Код Typescript вызывается изкнопка и не является javascript, встроенным в 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;

Answer 1

ngIf удаляет элемент из DOM, если значение переменной !isDates равно false и, следовательно, myElement будет нулевым.Либо вы можете использовать атрибут [hidden], либо скрыть элемент на основе условия с помощью css в качестве исправления.

Но, как правило, document.getElementById не является угловым способом

Answer 2

ngIf не просто «скроет» элемент, но и удалит его из DOM, поэтому вы не сможете получить к нему доступ, если isDates==true.

Предложение:

Вы можете использовать [class.hidden]="!isDates" вместо этого.Скрытый класс - это комбинация двух стилевых свойств: visibility=0 и display:None, поэтому элемент будет сохранен в dom, но не будет отображен.