Question

在下面的示例stackblitz

中，我正在使用Angular材质步进器组件。

，我正在尝试通过使用ngoninit中的表stepicons更改选择器mat-step的状态，将每个步骤的默认编号动态更改为材质图标。有人可以帮我吗？

<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并循环您的steps数组，而不是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'];

如何在Angular Material Stepper动态创建的组件中更改状态图标？

1 个答案: