Рендеринг HTML от JSON с Angular 8 - PullRequest
Новая
       7

Рендеринг HTML от JSON с Angular 8

1 голос
/ 11 марта 2020

У меня есть Angular Сборник рассказов с компонентами в нем.

У меня есть немного JSON в файле Stories.ts компонента, одно из свойств которого является содержимым 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!

), а не абзац со всеми примененными стилями et c ...

Поскольку содержимое DIV должно быть гибким (параграфы, списки и т. д. c), я хотел бы иметь возможность поместить 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>',
  },
];

В том же файле я установил мою историю, чтобы показать в сборнике рассказов, как это ... 

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

В файле .ts моего компонента у меня есть содержимое, настроенное как вход ... 

@Input() accordionData: any;

Ответы [ 3 ]

0 голосов
/ 11 марта 2020

Улучшение необходимо, когда вы получаете данные 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

Спасибо.

0 голосов
/ 11 марта 2020

Вы можете достичь этого с помощью 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>
0 голосов
/ 11 марта 2020

Попробуйте использовать внутренний HTML вместо внутреннего Html

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