使用Angular 8从JSON渲染HTML

Question

我有一台装有组件的Angular Storybook。

我在组件的stories.ts中有一些JSON，其中一个属性是DIV的内容，就像这样...

{
    "accordionLink": 'Accordion link 1',
    "accordionContent": "<p>Hello World!</p>",
}

模板HTML看起来像这样...

<li *ngFor="let accordionItem of accordionData; let i = index;">
    <a href="javascript:;" class="accordion-trigger" (click)="toggleAccordian($event, i)">
        {{ accordionItem.accordionLink }}
    </a>
    <div hide="!isActive">
        <div class="inner row">
            <div [innerHtml]="accordionItem.accordionContent"></div>
        </div>
    </div>
</li>

我尝试获取“ accordionContent” HTML以便在插值所在的实际DIV中进行渲染，但是我只能显示实际的字符串（

Hello World！

），而不是包含所有内容的段落适用的样式...

由于DIV的内容需要灵活（段落，列表等），因此，如果可能的话，我希望能够将HTML放入容器中。

任何帮助将不胜感激。谢谢！

编辑：

在stories.ts文件中，我这样设置了数据...

const mockData = [
  {
    "accordionLink": 'Accordion link 1',
    "accordionContent": '<p>1 - Lorem ipsum dolor.</p>',
  },
  {
    "accordionLink": 'Accordion link 2',
    "accordionContent": '<p>2 - Lorem ipsum dolor.</p>',
  },
  {
    "accordionLink": 'Accordion link 3',
    "accordionContent": '<p>3 - Lorem ipsum dolor.</p>',
  },
];

在同一个文件中，我将故事设置为显示在Storybook中，就像这样...

template: `<ui-accordion [accordionData]="accordionData"></ui-accordion>`,
props: {
    accordionData: object('Content', mockData, 'General'),
}

在组件的.ts文件中，我将内容设置为输入...

@Input() accordionData: any;

Answer 1

尝试使用innerHTML代替innerHtml

 <div [innerHTML]="accordionItem.accordionContent"></div>

Answer 2

在获取json数据时需要改进。我做了同样的事情，并且正在工作：

 jsonData = [
    {
      accordionLink: "Accordion link 1",
      accordionContent: "<p>Hello World!</p>"
    }
  ];
  accordionData: any;

  constructor() {
    this.accordionData = this.jsonData;
  }

示例：https://codesandbox.io/s/cold-flower-9ktdk?fontsize=14&hidenavigation=1&theme=dark

谢谢。

Answer 3

您可以通过ngx-markdown来实现

并将您的json HTML绑定到[data]：

<li *ngFor="let accordionItem of accordionData; let i = index;">
    <a href="javascript:;" class="accordion-trigger" (click)="toggleAccordian($event, i)">
        {{ accordionItem.accordionLink }}
    </a>
    <div hide="!isActive">
        <div class="inner row">
            <markdown [data]="accordionItem.accordionContent"></markdown>   
        </div>
    </div>
</li>