如何在 Angular 模板中插入标签名称答案

【问题标题】：How to Interpolate the Tag Name in Angular Template如何在 Angular 模板中插入标签名称
【发布时间】：2019-12-20 08:01:11
【问题描述】：

我有一些 api 数据..Json 格式的 HTML 标记：

[
  {
     type: 'p',
     attributes: [...],
     children: [{...},{...}]
  }
]

我想在一个角度模板中呈现它。由于标签的名称来自api，我需要插入标签名称。

我试过这个：

<ng-container *ngFor="let el of body">
   <{{el.type}}> foo bar</{{el.type}}>
</ng-container>

但得到“意外的结束标记“{{el.type}}”。

预期输出：

<p> foobar</p>

而且我不想使用 innerHtml 指令。

【问题讨论】：

【解决方案1】：

在 js 中构造你的 html 并将其分配给局部变量，最后将该值传递给 innerhtml，它将按您的预期呈现

【讨论】：

【解决方案2】：

您可以简单地使用 [innerHTML] 指令来完成它。

【讨论】：

【解决方案3】：

如果不想使用 [innerHTML]，可以使用 [textContent]。

【讨论】：