Angular 2 在 div 标签中获取 json 数据答案

【问题标题】：Angular 2 get json data in div tagAngular 2 在 div 标签中获取 json 数据
【发布时间】：2018-03-08 05:44:55
【问题描述】：

我是 Angular 2 的新手，使用 json 数据，在使用打字稿处理时，我使用 {{ data | json }} 从对象获取 json 数据，而不是 JSON 变量，我需要在我的 <div> 标记中获取数据网页。有没有可用的解决方案？

例如：如果数据格式如下：

{ type:"header",subtype:"h1",name:"FormName" }

我需要以下格式：

<h1>Form Name</h1>

【问题讨论】：

<h1>{{data.name}}</h1> ?你的问题很不清楚。
我认为他需要在 HTML 标签中获取该子类型并在其中命名。
我有 10 组不同的 json 数据，我需要将它们与具有该数据的相关 div 进行匹配，我使用的标签是文本、数字、日期、标题等，

标签： html json angular

【解决方案1】：

如果我完全理解您的问题，您可以在 Angular2 中使用 innerHtml 函数。

app.component.ts

export class AppComponent implements {
constructor() {
}

data = { type:"header",subtype:"h1",name:"Formname" };
  htmlString=`<${this.data.subtype}>${this.data.name</${this.data.subtype}>`;}

app.component.html

<div [innerHTML]="htmlString"></div>

【讨论】：

【解决方案2】：

假设您从服务中检索整个表单的内容作为一个对象数组，每个对象都有一个元素。使用
*ngFor(obj of arr)
遍历数组 var element = '{{obj.value}}'
formElement.append(element)

（这只是一个用于说明的存根。这将创建所有类型的元素，您只需要注意不同类型的属性，例如 css）

【讨论】：