заменить с удалением оригинального div

Question

Я создаю приложение для викторины на Angular, и я «переместил» объяснение в поле вопроса, используя replaceWith, но теперь мне нужна помощь, чтобы скрыть оригинальное объяснение ниже правильного ответа. Замена должна происходить только тогда, когда выбран правильный ответ. Объяснение должно двигаться, когда правильный ответ выбран для каждого вопроса в викторине, и в то же время убрать оригинальное объяснение снизу правильного ответа. Когда я перехожу к следующему вопросу, объяснение из предыдущего вопроса находится вместо поля вопроса, но его следует сбросить до текущего вопроса, не зная, как это сделать. Пожалуйста, смотрите мой код ниже.

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

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

radioChange(answer) {
  this.question.selectedOption = answer;
  this.answer.emit(answer);
  this.moveExplanation(this.itemFrom, this.itemTo);

  if (this.option === this.question.answer && this.question.selectedOption === this.question.answer) {
    this.count++;
    this.score++;
  }
}

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

Answer 1

Просто используйте ngIf, когда какое-то условие true/false, доступ и управление DOM должны быть последним средством.

Я думаю, вы хотите сделать что-то подобное с *ngIf (или использовать if else):

<div [hidden]="!isCorrect(option.optionValue)">
  <div id="explanation">
    <ng-container *ngIf="someCondition">
       <!-- Content here -->
    </ng-container>
    <ng-container *ngIf="!someCondition">
       <!-- Content here -->
    </ng-container>
  </div>
</div>

, а затем просто включите someCondition в своей функции:

someCondition = false;

radioChange(answer) {
  this.question.selectedOption = answer;
  this.answer.emit(answer);
  // instead of this, toggle condition
  // this.moveExplanation(this.itemFrom, this.itemTo);
  this.someCondition = true;

  if (this.option === this.question.answer && this.question.selectedOption === this.question.answer) {
    this.count++;
    this.score++;
  }
}

Это немного псевдокод, поскольку мне не совсем понятно, с каким контентом выхочу заменить, но вы поняли.

Answer 2

Укажите div объяснения с помощью тега #myElement для удаления объяснения.

добавьте приведенный ниже код в файл .ts

@viewChild('myElement')
private myElement:ElementRef;

moveExplanation(from, to) {
  to.replaceWith(from);
  this.myElement.nativeElement.innerHTML = '';
}