问题标签 [angular-material-stepper]

我正在使用cdk步进器来构建新的步进器，但我找不到为步骤之间的过渡附加角度动画的方法。有人可以帮助我吗？

我已经通过用 替换变量来尝试这个解决方案，但它没有按预期工作。currentstepper.selectedIndex

我正在使用角度步进器，我需要在其中一个步骤中显示一个组件。我需要单击一个按钮来加载该组件。我可以看到子组件被插入，但它没有正确显示。当我检查并转到“元素”选项卡中的该元素时，我可以看到插入的组件，当我悬停时，浏览器会在最右上角突出显示。这是路由模块：

父stepper.html

父stepper.component.ts

如果有人可以建议我在这里做错了什么？

注意：我发现问题主要出在 Material stepper 上。如果我添加一个条件，那么它会正确显示。但是这样做的问题是它多次加载相同的组件。如果有人可以提出更优雅的解决方案。

我无法设置图标颜色

我有一个带有五个垫子台阶的垫子水平步进器（例如，命名为 A 部分、B 部分 ... E 部分）。根据某些业务规则，每个部分（mat-step）可能有不同的颜色。

我知道如何更改“选定的”垫子步骤或如何更改所有垫子步骤的颜色（颜色相同），但不知道如何动态更改它，因此每个部分可能有不同的图标背景颜色.

使用 Angular v7

以下是将第三个垫步图标设置为绿色的样式。Id 确实有效，但我不知道如何在运行时从组件（打字稿）动态更改颜色。

我也尝试过使用[ngClass]，但在用作 mat-step 属性时会被忽略。仅当我将步骤标签附在其中并在其中使用它时才有效，但这不是必需的（我需要更改图标的背景颜色......而不是标签）。

预期结果：能够根据每个步骤的完成程度为每个步骤设置不同的列。（垫步可以是黄色、红色、绿色和黑色的组合），

实际结果：无法根据组件变量设置更改图标颜色

我正在努力实现 Angular Material 的 Stepper，我想使用开箱即用的样式……有没有可以下载它们的地方？

我已经尝试从 Angular Material 示例页面复制和粘贴样式......但这将是一个非常乏味的过程。

我在每个步骤中都使用带有动态表单的步进器。我已经为返回和下一步按钮创建了方法，我在单击下一步和返回按钮时调用它们，如下所示：

现在我还想在用户单击标题导航时前后移动，所以我也为此创建了一个方法：

在 onNavChange(event) 内部。我根据步骤名称调用方法 next 或 sub 。

问题是，当我单击下一个按钮时，它会被调用两次......首先它调用 onNavChange($event) 然后调用下一个按钮的方法。

我怎样才能确保它只被调用一次？有没有办法让 onNavChange() 仅在单击标题时才执行？

我正在使用 ionic、angular 8 和 @angular/material/stepper

我已经将样式应用于 ion-button 标签（由购买的组件库提供）。我想在地图步进器中使用这个 stying with 下一个按钮。

但是，如果我将（工作）按钮从

至

不再用于推进步进器。有没有一种简单的方法可以将 matStepperNext 指令应用于 ion-button 标签？

我正在使用角度步进形式。在其中一种形式中，我有几个带有复选框的项目。当我选中复选框时，模态窗口正在打开，但是当单击模态窗口上的关闭按钮时，我无法关闭窗口。

HTML

ts

请指导我解决这个问题。

我正在我的一个组件中实现一个，如果我在属性存在mat-horizontal-stepper时从它移动，我试图让错误状态显示在一个步骤上，但这没有发生。[completed]false

我不确定使用该completed物业或类似的东西是否有一些限制；这就是我到目前为止所拥有的：

组件的 HTML

组件的 TS

在上面的代码中，我只提供了重要的东西；但是如果我正确地遵循了 Angular Material 文档，我需要做的是添加providers到组件（或我的主应用程序模块）中，就是这样？

因此，例如，如果我进入第 2 步但保持completed条件为假，然后移至另一个步骤，它应该会触发错误，因为该步骤不再处于活动状态但也未完成。

我只是想了解一切是如何工作的，因为我没有使用反应形式或任何实际用于此步进器的形式，因为我正在使用 MatTable 代替；我只需要用户从表中选择一行（通过 MatTable 的选择功能），如果选择数组有一个元素，那么我可以将该步骤视为“完成”并启用移动到下一步。

Stackblitz 演示 https://stackblitz.com/edit/angular-khyu8u

编辑：

FormGroup如果我对步骤使用 a和属性，则错误状态可以正常工作[stepControl]，但我需要它而不需要表单。

我正在使用一个简单的 mat-stepper，其中步骤是使用*ngFor.

我想在渲染步进器后动态地向显示器添加一个步骤，然后立即以编程方式导航到它。

动态添加步骤可以正常工作 - 导航部分是问题，因为它会导致异常：“错误：cdkStepper：无法将超出范围的值分配给selectedIndex”，即使分配的索引应该在基于步骤的范围内传递给组件。

用于说明问题的简化示例（超时只是导致添加额外步骤的异步行为的占位符）。

关于我们如何解决这个问题的任何想法？

完整示例：https ://stackblitz.com/edit/angular-cdafd9?file=app%2Fstepper-overview-example.ts

我想以编程方式进入下一步，因为我有一个带有步进器控件的按钮栏组件：

当我单击下一步按钮时，我想触发一些外部验证，如果移动到下一步是我们想要的，结果将管理这些验证。

从文档中，有一种next方法，但如果我有这样的设置，则不确定该方法在哪里可用：

我在这里看到了一个类似的问题：Can I programmatically move the steps of a mat-h​​orizo​​ntal-stepper in Angular / Angular Material

问题是我无法访问按钮栏中步进器的 ID。我可以以某种方式将 ID 作为输入传递并调用stepper.next吗？