как отобразить Html-тег из объекта?

#javascript #angular

Вопрос:

У меня есть элемент :

  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-код, а не строковый тег?

1. obj.template в этом случае всегда будет отображаться в виде строки. Почему бы просто не использовать другой компонент.

2. Я думал, что просто составлю список p-диаграмм и интегрирую их непосредственно в свой объект

Ответ №1:

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

1. Действительно, график не отображается. Что следует использовать, если вы хотите загрузить список p-диаграмм? ng-для меня казалось логичным

2. Вы можете создать другой компонент, который будет отображать вашу p-диаграмму. Передайте ему значение объекта.

3. Я попробую с другим компонентом, я думал, это было бы проще

Ответ №2:

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

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