angular - 在角度 6 中禁用 mat-stepper 上先前完成的步骤

Question

我正在使用 Angular 材料在 Angular 6 中开发一个项目，并且在一个特定的路线中，我有一个垫子步进器，其中配置了 6 个步骤isLinear=true，因此用户在完成实际步骤之前无法进入下一步，依此类推。

但是当谈到第 5 步时，是否有一个带有某些操作的按钮，并且在用户单击该按钮后，我想防止用户保留并更改先前完成的数据。

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

Answer 1

您可以使用editableinput 属性，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