阻止图标在步骤Angular Material Stepper之间切换

Question

默认情况下，在步骤之间导航时，图标会从完成更改为可编辑。是否可以阻止此更改发生，而是将图标保留为步骤编号？

Answer 1

<ng-template matStepperIcon="edit" let-index="index">
{{index +1}}
</ng-template>

Answer 2

可能有点hacky，但您可以在completed="false"个<mat-step>标记上添加{{1}}，这会强制它保持未完成状态并保留数字。

Answer 3

这应该可以解决您的问题。

模板：

<mat-horizontal-stepper (selectionChange)="stepperSelectionChange($event, stepper)" [linear]="true" #stepper>

组件：

stepperSelectionChange($event: StepperSelectionEvent, stepper: MatHorizontalStepper): void {
  if ($event.previouslySelectedIndex > $event.selectedIndex) {
    stepper.steps.forEach((item, index) => {
      if ($event.selectedIndex <= index) {
        item.completed = false;
        item.editable = false;
      }
    });
  }
}