Генерация HTML из JSON в Angular

Question

Я пытаюсь сгенерировать HTML-код для шаблона компонента Angular из JSON и ищу лучшую практику.

На самом деле я загружаю JSON и использую * NgFor и * NgIf для достижения этого

const blocks = [
    {
      id: '1',
      type: 'header',
      fields: [{
        content : 'H1 Header'
      }]
    },
    {
      id: '2',
      type: 'image',
      fields: [{
        src : 'https://i.pinimg.com/originals/5e/f6/83/5ef68313994aaf68e87d190de943f104.jpg',
        title: 'My Image'
      }]
    },
]

<mat-accordion multi="true" *ngIf="blocks.length > 0">
  <mat-expansion-panel *ngFor="let block of blocks">
    <mat-expansion-panel-header>
      {{ block.type }}
    </mat-expansion-panel-header>
    <ul>
      <div *ngFor="let field of block.fields">
        <div *ngIf="block.type == 'header'">
          <h1>{{ field.content }}</h1>
        </div>
        <div *ngIf="block.type == 'image'">
          <img style="width:100%;" src={{field.src}} />
        </div>
        <div *ngIf="block.type == 'paragraph'">
          <p>{{field.content}}</p>
          </div>
      </div>
    </ul>
  </mat-expansion-panel>
</mat-accordion>

Есть ли лучший способ сделать это?

Answer 1

это не очень хорошая практика, в angular у вас есть шаблон, и вы должны связать свойства и события, чтобы сделать ваше приложение динамичным.Имейте в виду, что angular дезинфицирует ваш ввод, поэтому, например, вы не можете визуализировать сценарии и стиль так, как вы пытаетесь это сделать, поэтому вы не сможете отобразить всю страницу.Если вы хотите изменить заголовок динамически, вы можете сделать что-то вроде этого:

// in your component
title: string;

// in template
<h1>{{title}}</h1>

то же самое для изображения

// in component
src: string;

//in template
<img [src]="src">

Angular предназначен для создания приложений, но приложения имеют структурированную страницу,если нет, то какое приложение вы бы создали?

Answer 2

Вместо этого, если использовать несколько ngif, я бы использовал ngswitch