从Angular中的JSON生成HTML

Question

Im trying to generate HTML code to Angular component template from JSON and im looking for best practice.

Actually Im fetching JSON and use *NgFor and *NgIf to achieve that

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>

Is there better way to do that?

Answer 1

相反，如果使用几个ngif，我会使用ngswitch

Answer 2

this is not a good practice, in angular you have a template and you should bind properties and events to make your app dynamic. Keep in mind that angular sanitizes your input so for example you cannot render scripts and style in the way you are tryng to do so you won't be able to rendere an entire page. If you want to change a title dynamically you can do something like this:

// in your component
title: string;

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

same for image

// in component
src: string;

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

Angular is made to build apps, but apps have a structured page, if not what kind of app would you build?