angular material 步进一代

Question

如何生成材料步进器？

我收到一个 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 显示根本没有代码。

如何显示我的代码？

P.S。：我对使用表单不感兴趣，我使用步进器是因为它在尝试显示大量信息时具有可折叠属性。是状态设置为 done 且 [completed] 变量始终设置为 true

的原因

Answer 1

解决方案最终是不使用 [innerHTML] 而是使用 *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 变量。

angular material 步进一代

angular material stepper generation

angular

angular-material

code-generation

angular-material-stepper