问题标签 [mat-stepper]

我当前的垫子步进器看起来像这样：

步进标签右：

我希望它看起来像这样：

左侧步进标签：

我正在使用 angular mat-stepper。在我的示例中，我有 3 个步骤，我想设置第二个步骤。我正在使用selectedIndex属性。

这是我的代码

所选步骤正在显示，但问题是下一步按钮在步骤 2 中不起作用。当我单击下一步按钮时，没有任何反应。如果我转到上一步然后单击下一步按钮，它开始工作。为什么下一步按钮在步骤 2 中不起作用？我该如何解决？

Stackblitz 示例

我在每一步都使用 mat-stepper 和 formGroup 。我在然后步骤填写表格，然后单击到下一个，即使表格有效，以前也没有完成（它可以编辑并选择 mat-step-icon-selected）

据我了解，这是默认行为：步骤已完成且有效-> 已完成。我对吗？

我的情况有什么问题？

我正在管理的代码具有以下（标准？）方式来了解某个步骤是否已完成。html具有以下形式：

完成的步骤以不同的颜色显示。当 myStepCompleted() 仅在所有标记为必填字段都已设置时才返回 true 时，情况就可以了。我有一个步骤（这是最后一个，但不相关，我猜）应该显示为已完成（相同颜色），仅当它至少被查看一次（它不可编辑）时。该步骤可通过“下一个”、“上一个”和选择标题来访问。我试图通过了解该步骤仅被查看，而不是所有必填字段都已填写来了解如何实现函数 myStepCompleted()。

我正在尝试保留垫子步进器当前已完成的步骤。我注意到的是，当我刷新页面或单击后退按钮时，整个事情都会重置。

我所做的是将每个步骤（5 个步骤）的状态存储在会话存储中，并希望将每个保存的状态传递给 mat-stepper。

我目前没有想法。

我有一些组件TestComponent，在它的模板中，使用<mat-stepper>. 由于步进器的上下文，我必须以编程方式前进到下一步，而不是matStepperNext在按钮上使用指令。所以我的组件看起来像这样：

测试组件.ts

现在的诀窍是我必须测试那个stepper.next()被调用的东西。因为我只是使用<mat-dialog>指令，我从来没有在类中真正创建它的对象，也不是构造函数中的提供者，所以我不太确定如何测试它。我尝试了很多不同的方法都没有成功，我的最新测试如下：

test.component.spec.ts

但我只是得到错误

预计间谍 MatStepper.next 已被调用

我遇到了一个非常奇怪的问题。我正在开发一个 angular 13.0.2 的网站，我正在使用 mat-stepper 创建一个表单（和 ngx-editor ，我会提到它以防出现问题）。当页面加载时，除了 mat-stepper 之外的所有内容都完美显示。我必须点击屏幕才能显示。我必须承认我的表格中有很多元素，但我不知道是不是因为这个。这里可能有什么问题？

谢谢。

PS：这里是整个 html 代码，因为还没有后端。

我正在为一个对话框使用 mat-stepper，该对话框既用于创建新实体，也用于编辑特定类型的现有实体。步进器由四个步骤组成。前三个步骤中的每一个都包含一个用于输入数据的表格，而最后一步只是对通过前三个步骤输入的数据的摘要/概述。

如果他/她在所有三个步骤中都输入了有效数据，我只想让用户进入最后一步。为此，我将linear属性添加到步进器以强制用户完成每个步骤。当用户通过对话框创建新实体时，这非常有效。但是，在编辑现有实体时，例如，在至少单击第 2 步之前，不可能直接进入第 3 步。在编辑模式下打开对话框时，我以编程方式用数据填充步骤中的所有字段现有实体，因此我希望允许用户直接转到任何步骤，只要在当前可见步骤中输入有效数据即可。这是一个显示问题的stackblitz： stackblitz

尽管所有字段都已以编程方式填写，但在单击前面的步骤之前，我不能直接进入第 3 步或第 4 步。

我第一次尝试解决这个问题是linear在编辑模式下打开对话框时删除该属性。虽然这具有预期的效果，但它还允许用户在一个步骤中清除一些字段，然后直接转到最后一步，我不想允许这样做，因为只有在所有前面的步骤都完成时才能到达最后一步完全填充了有效数据。

有没有办法在垫子步进器中实现这种行为？如果我的问题不清楚，请告诉我，我会尽力更详细地描述它。

我正在建立一个网站，在注册表格中我使用 mat-vertical stepper 它有 5 个 mat-steps 1）个人信息 2）投资资料 3）帐户信息 4）设置资金 5）登录并提交

登录并提交之前的 mat-step 标签中的所有信息都将使用其相应的 mat-step-Labels 进行检索。

我的问题是每个 mat-Step-Label 都有一个编辑图标，当用户单击它时，它应该转到特定的 mat-step 并编辑内容。

在搜索了很多时间之后，我没有找到任何好的解决方案来解决我的问题。对于我们的应用程序，我必须在屏幕顶部显示订单进度。像下面的东西

但在我们的工作流程中，我们有许多步骤，准确地说是 15 个。我想使用 mat-stepper 来实现相同的功能，因为它具有滚动选项，但我一直在更改相同的颜色和图标以及如何根据某些条件更改颜色。如果状态与阵列状态匹配，我想用蓝色显示，其余的用绿色显示完成。

.ts 文件

.html