Как изменить значок состояния в угловом материале шагового динамически созданного компонента?

Question

Я использую угловой компонент материала в следующем примере stackblitz

, и я пытаюсь динамически изменить номера по умолчанию для каждого шага на значки материалов путем изменения состояния циновки селекторашаг с помощью таблицы степиконов в ngoninit.Кто-нибудь может мне помочь с этим?

<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'];