角材料步进生成答案

【问题标题】：angular material stepper generation角材料步进生成
【发布时间】：2020-10-16 08:35:51
【问题描述】：

如何生成材料步进器？

我收到一个 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 中查看检查器表明根本没有代码。

我怎样才能显示我的代码？

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

【问题讨论】：

标签： angular angular-material code-generation angular-material-stepper

【解决方案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 变量。

【讨论】：