使用 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 中渲染出来，但我所能显示的只是实际的字符串（

你好世界！

），而不是应用了所有样式等的段落...

由于 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>