如何更改 Angular 材料步进器动态创建的组件中的 state 图标？

Question

我在以下示例stackblitz中使用 Angular 材料步进器组件

我正在尝试通过使用ngoninit中的表stepicons更改选择器mat-step的state来动态地将每个步骤的默认数字更改为材料图标。 谁能帮我这个？

<mat-vertical-stepper (selectionChange)="selectionChanged($event)" [linear]="true" style="width:100%;height:100%">
<ng-template matStepperIcon="edit">
    <mat-icon>done</mat-icon>
</ng-template>
<ng-template matStepperIcon="category">
    <mat-icon>category</mat-icon>
</ng-template>
<ng-template matStepperIcon="apps">
    <mat-icon>apps</mat-icon>
</ng-template>
<ng-template matStepperIcon="search">
    <mat-icon>search</mat-icon>
</ng-template>
<mat-step *ngFor="let step of steps; let i = index" [label]="step.title" state="stepicons.text">

    <router-outlet *ngIf="i === selectedStepIndex"></router-outlet>

    <button mat-raised-button color="primary" matStepperNext
    style="margin-top:10px; float: left;position: relative;">Επόμενο</button>
</mat-step>

Answer 1

希望你正在寻找类似的答案

https://stackblitz.com/edit/pxblue-dynamic-stepper-angular-n7bnmh

添加 div 并循环您的步骤数组而不是 mat-step 循环

 <div *ngFor="let step of steps; let i = index">
<mat-step  [completed]="step.completed" [state]=myState[i]>
  <form>
    <ng-template matStepLabel>{{step.title || 'Choose an action'}}
      <mat-icon class="delete_icon"  *ngIf="stepper.selectedIndex === i" (click)="removeStep(i)"
        matTooltip="Remove step" matTooltipPosition="right">delete</mat-icon>
    </ng-template>
    <mat-radio-group class="radio-group" (change)="changeStepSelection($event, i)">
      <mat-radio-button style=" margin: 10px 0 " *ngFor="let option of stepOptions" [value]="option.value">
        {{option.label}}
      </mat-radio-button>
    </mat-radio-group>
  </form>
</mat-step>
</div>

将其放入您的图标模板文本数组中以获取相关图标（您可以在此处构建自己的逻辑）

myState = ['category','apps','search'];