Question

我正在使用Angular材质在Angular 6中进行一个项目，并且在一个特定的路线中，我有一个垫式踏步机，该踏步机使用isLinear=true配置了6个步骤，因此用户无法继续下一步，直到完成实际步骤等等。

但是当涉及到第5步时，是否有一个执行某些操作的按钮，并且在用户单击该按钮之后，我想防止用户退后并更改以前完成的数据。

我已经禁用了后退按钮，但是用户可以单击步进器顶部显示的步骤标题返回到先前完成的任何步骤。

Answer 1

您可以为editable使用mat-step输入属性，如下所示。在最后一步中将editable设为false，在按钮上单击，则以前的步骤将不再可编辑

在模板文件中

<div fxLayout>
  <mat-horizontal-stepper #stepper style="background: #DDD">
    <mat-step label="Step 1" [editable]="editable">Step 1</mat-step>
    <mat-step label="Step 2" [editable]="editable">Step 2</mat-step>
    <mat-step label="Step 3">
      <button (click)="editable=!editable">Disable steps</button>
    </mat-step>
  </mat-horizontal-stepper>
</div>

在TS文件中

editable: boolean = true;

工作示例在Stackblitz

中

在角度为6的垫子步进器上禁用先前完成的步骤

1 个答案: