Angular 从对象数组生成html

我试图从下面的对象响应生成html标记

"view": [{
  "type": 'text',
  "depth": 0,
  "text": "This is a sample text"
}]

我想在这里实现的是，我想循环思考每个

类型

&附加适当的html标记

<h1>This is a sample heading</h1>
<p>This is a sample text<p>

这是一个示例标题
这是一个示例文本

我看起来像这样

  private generateHtml (content) {
    let contentString = [];

    switch(type) {
      case 'text': return `<p>${contentString.join('')}</p>`;
  }

private-generateHtml（内容）{
让contentString=[]；
开关（类型）{
大小写“text”：返回“${contentString.join（“”）}
”；
}

寻找一个嘲笑持有代码，从我的项目开始

---

注意：-上面的代码没有功能，只是想了解一下我在寻找什么。

您可以使用这种方法，因为最好不要直接从html使用函数，因为它会使web浏览器内存过载。 所以你需要重构一些数据

原始内容

附加功能

---

您可以使用这种方法，因为最好不要直接从html使用函数，因为它会使web浏览器内存过载。 所以你需要重构一些数据

原始内容

附加功能

---

我想你应该按照你的想法去做，似乎很完美！我在寻找一些持有scoffing的代码，这样我就可以在itI之上构建我想你需要迭代数组中的每个元素并通过这个函数获得输出我想你应该按照你的想法去做，似乎很完美！我在寻找一些持有scoffing的代码，这样我就可以在itI之上构建k您需要迭代数组中的每个元素并通过此函数获得输出哇，谢谢。：-。还有没有更好的方法来过滤类型而不是使用多个forEach循环？这是实现代码循环的方法。看看如何更好地处理JSON数据以减少循环。哇，谢谢。：-。还有没有更好的方法来过滤类型r类型而不是使用多个forEach循环？这是实现代码循环的方法。请参阅如何更好地使用JSON数据以减少循环。

   content = {
    "data": {
      "areas": [{
        "sections": [{
          "rjf": [
            {
              "type": "heading-1",
              "depth": 0,
              "text": "This is a sample heading"
            },
            {
              "type": "paragraph",
              "depth": 1,
              "text": "This a sample text /n"
            },
          ]
        }]
      }]
    }
  };

    constructor() {
    this.content.data.areas.forEach((val)=>{
        val.sections.forEach((elem)=>{
          elem.rjf.forEach(async (data)=>{
            data['generatedHtml'] = await this.generateHtml(data);
          });
        });
    });
  }

  private generateHtml (elem: any): string {
    switch(elem.type) {
      case 'heading-1': return `<h1>${elem.text.trim()}</h1>`;
      case 'paragraph': return `<p>${elem.text.trim()}</p>`;
    }
  }

<div *ngFor="let cont of content?.data?.areas">
  <div *ngFor="let section of cont?.sections">
    <div *ngFor="let data of section?.rjf">
      <span [innerHTML]="data.generatedHtml"></span>
    </div>
  </div>
</div>