问题标签 [mat-stepper]

我正在尝试使用ng-template该matStepperIcon属性来覆盖默认 Angular Material 的 matStepper 图标。我也想传递一些数据，我尝试使用ng-containerand *ngTemplateOutlet，但是它只能部分工作。

正如您从以下代码中看到的那样，我希望该print函数始终打印定义的值，但是，在正确打印步骤的七个 ID 后，它会打印undefined七次。为什么会这样，我该如何防止这种情况发生？

链接到 StackBlitz 示例

另一方面，将我的代码更改为以下代码会导致print函数打印所有正确的 ID，但它也会打印最后一步的 ID 8 次。

在这种情况下如何对 Material stepper 进行单元测试：

这会起作用，但是当使用 Jasmine 测试组件时，我会得到：

TypeError：无法设置未定义的属性“selectedIndex”

我应该注意，在测试MatStepperModule中是在进口中。

我在我的应用程序中实现了线性mat-stepper。它包含每个步骤的一些表单，您可以使用下一个和上一个按钮导航到这些表单。只有当当前表单的数据有效时，您才能通过单击下一步按钮进入下一步。以前的功能没有数据验证。

您无法通过直接单击步骤标题或 来在步骤之间导航mat-step。但真正的问题是允许使用或键mat-stepper导航到下一步。spaceenter

我想防止这种情况发生，即无论表单是否有效，用户都不能通过按键导航到下一步。

以下是我对 mat-stepper 的实现：

1. stepperForm.html

那么，我怎样才能防止mat-step在按键上前进呢？

如果您需要任何其他信息，请告诉我。

当 mat-h​​orizo​​ntal-stepper 导航菜单位于 cdk 虚拟滚动标签内时，我无法弄清楚如何摆脱它。::ng-deep .mat-horizontal-stepper-header-container { display: none !important; }当我不在 HTML 中使用 cdk-virtual-scroll-viewport 时，我尝试使用并且效果很好。

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

所以我们可以很容易地添加步骤（html）：

(ts)：

但我希望这些动态步骤（我有静态和动态步骤）是可关闭的。

所以我想要一个可以点击关闭的“X”按钮。

我已经有了打字稿“删除步骤”代码，但我想不出一种方法来放置 x。绝对从外部定位它是行不通的，因为当我调整窗口大小并添加步骤时，步骤会四处移动。

我希望能够在步骤标题级别注入我的 html 模板代码。

我找不到有关如何执行此操作的任何线索。

是否可以阻止导航到特定步骤，直到其完成状态设置为 true。

https://stackblitz.com/edit/angular-4vs1j1-kg3u7q?file=app%2Fstepper-editable-example.html。

在上面的 stackblitz 中，假设用户在第一步中输入值并通过单击 Next 按钮导航到下一步。现在从第 2 步没有完成，他回到第 1 步。由于第 2 步未完成，它将灰显如下

但是如果用户点击 2 的标题，他仍然可以导航到第 2 步。

在完成之前如何禁用该步骤？

我正在创建一个有 4 个步骤的垫子步进器的角度应用程序。用户必须一一完成这些步骤。只有当他在第一步中完成表单时，他才能通过单击表单中的按钮而不是单击步进器标签进入下一步。完成这些步骤后，他仍然可以通过单击步进器标签访问所有已完成的步骤。我知道这可以通过线性和完整属性来实现，并且有很多示例可用。

场景是，如果用户完成到第 4 步并且他返回到第 2 步，以第二步的形式更改任何内容，则必须禁用第 3 步和第 4 步（即使它已完成，它也必须变为禁用且不可编辑并且用户必须像开始时那样通过按钮导航）。是否有可能在 mat stepper 中实现这一点？

我正在使用有角度的材料，所有组件也可以正常工作，但步进器无法正常工作

这是他的 Html 文件垫子滑块正在工作，但垫子水平步进器不工作请看一下图像

共享模块我正在使用共享模块并导入它

Css 文件我还导入了字体和图标以及 deeppurple 主题

我有一个带表单组的垫子步进器。在第二步中，我使用从第一步收集的数据禁用了一些表单控件，并提供了一些更活跃的输入。离开第二步是不可能的，无论是下一步按钮还是顶部的导航都不起作用。

嗨，我想像给定的图像一样自定义现有的角度材料步进器 ui。是否可以以编程方式更改图标，如果出现错误，则应显示红色的错误图标

https://stackblitz.com/edit/angular-4rvy2s-sprtoe?file=app/stepper-overview-example.ts