Содержимое Angular InternalHTML перемешано. Только последний внутренний HTML отображается правильно. ⇐ Html

[Anonymous]

В моем проекте Angular (версия 8) я создаю список статического HTML из базы данных и отображаю его в родительском HTML. Только последний элемент div, имеющий внутренний HTML, отображается правильно, все предыдущие элементы div, имеющие дочерний HTML, отображаются неправильно. Содержимое перемешано. По сути, стиль дочернего HTML-кода не учитывается, за исключением последнего дочернего HTML-кода.
Я использую канал sanitize html для div.
Угловой компонент onInit запрашивает БД в цикле. Каждый вызов get возвращает текст HTML, который добавляется к массиву строк. Текст HTML — это, по сути, файл, преобразованный из PDF в HTML. Каждый HTML-файл имеет свой собственный тег стиля.
Я предполагаю, что только последний стиль innerHTML применяется ко всем предыдущим дочерним HTML, отсюда и беспорядочное содержимое (если мое предположение неверно).
Есть какие-нибудь предложения по решению проблемы?
HTML

Код: Выделить всё

Очистка HTML:

Код: Выделить всё

      @Pipe({ name: 'sanitizeHtml'})
export class SanitizeHtmlPipe implements PipeTransform  {
constructor(private _sanitizer: DomSanitizer) { }
transform(value: string): SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(value);
}
}

Компонент:

Код: Выделить всё

 ngOnInit(){
this.questionset = this.storage.get(quesId);
//pseudo code
forEach(item in this.questionset){
this.getHTMLfromDB(item)
}
}

getHTMLfromDB(question: QuestionBank) {

this.Service.getQuestionHtmlFile(question.questionFilePath).subscribe(res =>
{

this.questionDataFromHtml.push(res.text());
question.questionData.questionDataFromHtml = res.text();
});

Правильное отображение. Вопрос 1 и Вопрос 2 одинаковы.
Правильное отображение.
Неверное отображение. Вопрос 1 и Вопрос 2 отличаются
Неправильное отображение
Stackblitz:
stackblitz

Подробнее здесь: https://stackoverflow.com/questions/667 ... played-cor