html - 使用 Angular 8 从 JSON 渲染 HTML

Question

我有一个 Angular Storybook，里面有组件。

我在组件的story.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 放入容器中。

任何帮助都感激不尽。谢谢!

编辑:

在story.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>