Question

I have an item :

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

I inform him of the following elements

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

 this.list = obj;

I would like on the Html page, the obj.template is considered to be a html tag, but it considers it to be text

 <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>

Would you have a solution to consider obj.template as Html code and not a string tag ?

Answer 1

我认为您正在尝试将ngFor与不可迭代的对象一起使用。因此它将引发错误。如果您正在尝试使用阵列。如果您使用<div [innerHTML]></div>，它将不会呈现p-chart。您需要使用其他有条件地渲染模板的组件。

Answer 2

To achieve expected result , use below option

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

how to render an Html tag from an object?

2 个答案: