材料角形步进器中的错误图标

Question

当状态为“地址”时，我试图放置一个编辑图标，但是该图标是第一个状态（家）的必需项。

我尝试：

第一步：

<ng-template matStepperIcon="edit">
            <mat-icon>home</mat-icon>
          </ng-template>

          <mat-step label="Antes de começar..." state="home">
..........

第二步：

<ng-template matStepperIcon="address">
    <mat-icon>edit</mat-icon>
</ng-template>

<mat-step label="Dados do seu pet..." [stepControl]="secondFormGroup" state="address">    
        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
        </div>

这表明：

第二步必须是一个编辑图标，但为什么要有第一步的图标？

Answer 1

您应该覆盖home图标，将matStepperIcon="address"更改为以下内容。

<ng-template matStepperIcon="home">
    <mat-icon>edit</mat-icon>
</ng-template>

修订

您将需要按状态控制图标覆盖，请在下面的材料堆叠闪电示例中查看phone和chat状态。

https://stackblitz.com/angular/onvqbjrynkj?file=app%2Fstepper-states-example.html

修订版2

您还可以根据索引使用* ngIf。

<ng-template matStepperIcon="edit" let-index="index">
            <mat-icon *ngIf="index == 0">home</mat-icon>
            <mat-icon *ngIf="index == 1">edit</mat-icon>
          </ng-template>