如何将json文件中的html数据呈现到angular4项目中

Question

这是我的appComponent.ts中的代码：

var res = this.http.get('/assets/panels.json');
res.subscribe(res => this.panels = res.json());

以下是json文件：

[{
  "title": "panel1",
  "content": "<mat-tab-group><mat-tab label="Tab 1">Content 1</mat-tab><mat-tab label="Tab 2">Content 2</mat-tab<</mat-tab-group>"
 },
 {
  "title": "panel2",
  "content": "content2"
}]

但是在浏览器中，我在标签中发送的任何内容都按原样显示。它没有编译为html例如<h1>HI</h1>应该在浏览器中显示为HI。

对mat-tab-group中的数据也必须这样做，请帮忙。

Answer 1

您必须设置相应标记的innerHtml。除非您在innerHtml中设置Angular，否则将在插值标记{{}}中为您清理内容

考虑到您的响应对象，这样的事情

<div [innerHTML]=“res.content”></div>