如何禁用 Angular Material Stepper 中的步骤？答案

【问题标题】：How to disable a step in Angular Material Stepper?如何禁用 Angular Material Stepper 中的步骤？
【发布时间】：2018-05-25 17:54:08
【问题描述】：

我在 Angular Material 水平步进器中有 3 个步骤。我想默认启用前 2 步，但禁用 3 步（但不隐藏）。

这些步骤不必具有决定当前步骤是否有效的表单值。有一系列后端调用决定当前步骤是否有效。线性模式选项看起来可以工作，但它似乎依赖于它们是具有所需值的表单，以确定表单是否有效。我没有表格，但仍然想要相同类型的功能。有什么想法吗？

【问题讨论】：

【解决方案1】：

您不必使用表单来使用步进器。请注意线性步进器上的Angular Material documentation 中的以下内容：

或者，如果您不想使用 Angular 表单，您可以将完成的属性传递给每个步骤，这将不允许用户继续，直到它变为真。

没有表单，您只需要使用自己的逻辑和步进器功能来实现状态等。

【讨论】：

【解决方案2】：

要实现这一点，您可以禁用 mat-stepper-header 导航。

并使用点击事件领先一步。

要禁用 mat-stepper-header 导航，请使用此 css

.mat-step-header {
                pointer-events: none !important;
     }

这工作得很好。

谢谢

【讨论】：

【解决方案3】：

使用 Completed Stepp，使用任意条件将其设置为 true 或 false，这是 Material Angular 中的信息

已完成的步骤
默认情况下，如果步骤有效（在线性步进器的情况下）并且用户已与该步骤交互，则该步骤的已完成属性返回 true。然而，用户也可以根据需要通过设置完成属性来覆盖这个默认的完成行为。

【讨论】：