Как сделать HTML-тег из объекта?

Question

У меня есть предмет:

 const obj: any = {
          name: '',
          template: null
        };

Я сообщаю ему о следующих элементах

 obj.name = elt.text;
 obj.template = `<p-chart type="line" [data]="data"></p-chart>`;

 this.list = obj;

Я бы хотел на странице Html, obj.template считается тегом html, но он считает его текстовым

 <div class="col-sm-4 my-3"
   *ngFor="let item of list">
<div class="card">
  <div class="card-header">
    {{ item.name }}
    {{ item.template }}
   </div>
</div>

Не могли бы вы решить, что obj.template следует рассматривать как HTML-код, а не как строковый тег?

Answer 1

Я думаю, вы пытаетесь использовать ngFor с объектом, который не повторяется.Так что это выдаст ошибку.Если вы пытаетесь это с массивом.Если вы используете <div [innerHTML]></div>, он не будет отображать ваш p-chart.Вам нужно использовать другой компонент, который будет отображать ваш шаблон условно.

Answer 2

Для достижения ожидаемого результата используйте опцию ниже

<div [innerHTML]="item.template"></div>