时间戳

首页 > 解决方案 > 在 Angular 中从 JSON 生成 HTML

javascript - 在 Angular 中从 JSON 生成 HTML

问题描述

我试图从 JSON 生成 HTML 代码到 Angular 组件模板，我正在寻找最佳实践。

实际上我正在获取 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>

有更好的方法吗？

标签： javascriptangular

解决方案

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

推荐阅读