在angular 6中禁用mat-stepper上之前已完成的步骤

Question

我在Angular 6中用Angular材料做一个项目，在一条特定的路线上，我有一个带有6个步骤的isLinear=true配置的垫子步进器，所以用户在完成实际的步骤之前不能进入下一步，等等。

但是到了第五步，是不是有一个按钮有一些动作，在用户单击该按钮后，我想防止用户保留和更改之前完成的数据。

我已经禁用了back按钮，但用户可以单击stepper顶部显示的step header返回到之前完成的任何步骤。

Answer 1

您可以使用mat-step的editable输入属性，如下所示。在最后一步中单击按钮时将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中的工作示例