如何将 getElementById 与 *ngIf 一起使用？

Question

I'm trying to select a div which has a *ngIf on it:

<div id="explanation" *ngIf="isCorrect(option.optionValue)">

which returns null when I use getElementById. If I remove ngIf it works fine, but I need to use the ngIf in my app. So how do I go about selecting the div?

EDIT: refactored code like this:

<div [hidden]="!isCorrect(option.optionValue)">
  <div id="explanation">
    Option {{ question.answer }} is correct because {{ question.explanation }}.
  </div>
</div>


ngAfterViewInit() {
  let itemFrom = document.getElementById('explanation');
  let itemTo = document.getElementById('question');
}

radioChange(answer) {
  this.question.selectedOption = answer;
  this.answer.emit(answer);

  this.moveExplanation(this.itemFrom, this.itemTo);
}

moveExplanation(from, to) {
  to.replaceWith(from);
}

question and explanation are now both logged, replaceWith works, just need to remove the original explanation from underneath the correct answer and each question's explanation should move into the question box and similarly remove the explanation from underneath the correct answer.

Answer 1

if you want to have access to your div with TypeScript, then you need to mark it with a Hashtag

<div id="explanation" *ngIf="isCorrect(explanation)" #explanation>

and add the name into the parameter you use, to pass the value!

or with

<div [(ngModel)]="option"></div