0

如何生成材料步进器？

我收到一个 JSON 文件，我需要从中生成步进器。使用时我根本无法显示任何内容[innerHTML]

这是我要实现的目标的示例：

  <mat-vertical-stepper [linear]="false">
    <mat-step [completed]="true" state="done">
      <ng-template matStepLabel>Job name here</ng-template>
      <p>this is test 1</p>
    </mat-step>
    <mat-step [completed]="true" state="done">
      <ng-template matStepLabel>Job name here</ng-template>
      <p>this is test 2</p>
    </mat-step>
    <ng-template matStepperIcon="edit">
      <mat-icon>work</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
      <mat-icon>work</mat-icon>
    </ng-template>
  </mat-vertical-stepper>

事实上，当我尝试使用[innerHTML]这种方式时，它工作得很好：

  <mat-vertical-stepper [linear]="false">
    <span [innerHTML]="experienceDisplay">
    </span>
    <ng-template matStepperIcon="edit">
      <mat-icon>work</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
      <mat-icon>work</mat-icon>
    </ng-template>
  </mat-vertical-stepper>

我根本无法显示任何东西。即使我设置experienceDisplay为与删除的 HTML 完全一样。在 Firefox / Chrome 中查看检查器表明根本没有代码。

如何让我的代码显示？

PS：我对使用表单不感兴趣，我在尝试显示大量信息时使用步进器的可折叠属性。女巫是为什么状态设置为done并且[completed]变量始终设置为true

4

1 回答 1

0

解决方案最终是不使用 ，[innerHTML]而是使用 a *ngFor，不同之处[innerHTML]在于<mat-vertical-stepper>.

因此解决方案看起来像这样：

  <mat-vertical-stepper [linear]="false">
    <mat-step [completed]="true" state="done" *ngFor="let experience of experiences">
      <ng-template matStepLabel><div>{{experience.title}}</div></ng-template>
      <p [innerHTML]="experience.description"></p>
    </mat-step>
    <!-- ng templates here -->
  </mat-vertical-stepper>

该experiences变量是 JSON 变量。

于 2020-06-25T21:54:28.690 回答