angular - 如何在角度垫步进器中显示默认图标而不是“完成”图标

Question

我正在使用角度 8.2.4 和水平垫步进器。我已经在每个步骤中自定义了图标，并且一旦访问了每个步骤，我就不需要显示“勾号”图标（对应于完成状态）。这就是它现在的样子。

`<mat-horizontal-stepper #stepper [linear]="true" class="register-stepper">
          <!--<ng-template matStepperIcon="done">
            <mat-icon>done</mat-icon>
          </ng-template>-->
         <ng-template matStepperIcon="user">
                  <mat-icon>account_circle</mat-icon>
         </ng-template>
         <mat-step [completed]="true" state="user">
                  <ng-template class="form-control" matStepLabel>Basic</ng-template>
                  <h4 class="cgg-component-heading">Basic Information</h4>                  
                </mat-step>
        </mat-horizontal-stepper>`

我已经删除了the matStepperIcon="done"。

如何避免显示完成状态的图标并保持自定义默认图标不变而不显示“勾号”图标？

Answer 1

需要更清楚一点，默认图标是什么意思。从您上面的图片中，我假设您在所有步骤中都需要“account_circle”图标。在这种情况下，下面的代码将起作用。

<!-- START - Material Stepper  -->
<mat-horizontal-stepper>
    <!-- Icon overrides. -->
    <ng-template matStepperIcon="edit">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="active">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="done">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="number">
        <mat-icon>account_circle</mat-icon>
    </ng-template>
</mat-horizontal-stepper>
<!-- END - Material Stepper  -->

只需将状态替换为您想要的任何图标即可。除非您明确替换状态，否则材料步进器不会使用您的图标。

Answer 2

添加空编辑状态它将覆盖默认行为

尝试这个：

<ng-template matStepperIcon="edit">
</ng-template>