Angular [innerHtml]: как отображать дополнительные элементы внутри элемента с помощью директивы [innerHtml]

почему вы используете [innerHTML], если ваш item.isi не является элементом html; мы используем innerHTML для рендеринга html-результата; например, если ваш item.isi - <p>My name</p>; если это не элемент html, без использования innerHTML, вы можете просто использовать {{item.isi}} внутри своего div, чтобы вы могли также отображать другие элементы html

вы можете попробовать использовать ElementRef, если вы хотите добавить элемент, который не хочет заменять полный html,

html

<div #Container>
    add here 
 </div> 

ts файл

export class AppComponent implements AfterViewInit  {
  @ViewChild('Container') container: ElementRef ;

  content = [
   {judul: "Judul 1", isi:"<div id='title_1'>Isinya</div>"},
   {judul: "Judul 2", isi:"<div id='title_2'>pranay</div>"},
  ];

  ngAfterViewInit() { 
   this.content.forEach( (item,index) =>{
      this.container.nativeElement.insertAdjacentHTML('beforeend', `<div id = "title${index}">${item.judul}</div>`);
this.container.nativeElement.insertAdjacentHTML('beforeend', `${item.isi}`);

   });
}

однако elementref не рекомендуется.

вывод вышеуказанного кода

вы можете видеть, как он добавляет контент после добавить сюда один за другим

Найти: Рабочая демонстрация

Вместо использования функции в вашем компоненте (она не работает как ваш html-шаблон, пытающийся передать html в ваш файл typscript), вы должны создать канал, как показано ниже

html.pipe.ts

import { Component, Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'html'
})
export class HtmlPipe implements PipeTransform {
    constructor(private sanitized: DomSanitizer) {}
    transform(value) {
        return this.sanitized.bypassSecurityTrustHtml(value);
    }
}

и используйте это как

html

<div *ngFor = "let item of content">
 <h3 [innerHTML] = "item.judul | html ">add</h3>
 <div [innerHTML] = "item.isi | html "><p>new word</p></div>
</div>

Найти: Рабочая демонстрация

Насколько я понимаю ваш вопрос, использование внутреннего html заменяет внутренний html. Поэтому старое значение заменяется значением из вашего объекта.

Я понимаю, что вы следуете этому подходу, поскольку хотите отобразить значение из объекта.

Так что лучше использовать трубы. Может быть. Просто проверьте этот ответ. Если это поможет. кликните сюда