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

Question

我正在Angular 6中使用Angular材质进行项目，并且在一个特定的路线中，我有一个垫式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中