问题标签 [angular-material-stepper]

我想根据附加的屏幕截图实现角度材料步进器，其中水平线在编辑状态下有一些不同的 css，当它完成时它就不同了。

在编辑状态下，我需要显示底线。

我有一个表示对象数组的材料步进器。我正在尝试将角度材料 v9 步进器的当前步长设置为对象数组的最后一个元素。问题是对象数组是一个组件输入，我认为材料步进器在@Input()解决之前正在渲染，所以我得到一个Error: cdkStepper: Cannot assign out-of-bounds value to 'selectedIndex'.错误。

我想如果我以编程方式在ngAfterViewInit()

但这似乎仍然会引发错误。我应该在哪里设置这个，以便在渲染材料步进器之后正确设置所选索引，并且在组件接收到输入之后？

请注意，我看到课堂上有许多“生命周期钩子”，MatStepper但我在材料文档中没有看到任何关于它们的文档。

我正在使用 Angular 8，并在我的注册页面中使用了 Reactive 表单。并且还使用 Angular Material Stepper Ui 来设计表单。

这是 signup.component.ts 文件。

这是 signup.component.html 文件。

验证正在正确运行。（当输入有效的电子邮件时，表单字段变为红色）但未显示验证消息。在添加角度材料步进器之前它是完美的工作。当我添加步进器时，我必须更改表单组结构并添加表单数组并将表单分成多个部分。之后发生了这个错误。

我有一个材料步进器，步进器的每个步骤都有表格。在那里，每个步骤都应该由与之关联的表单控制。

即使已经在 SO 中提出了这个问题，但这些问题的答案并不能解决我的问题。因此我在问。

父 HTML

在我的父组件中，我有以下内容。

我的子类组件

子类 HTML

现在，当我运行应用程序时，在控制台中，我看到以下内容。

ERROR 错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'stepControl：null'。当前值：'stepControl：[object Object]'。

正如我之前提到的，SO 中也有同样的讨论。例如，以下链接问题的答案和评论建议将表单初始化移至构造函数，而不是将其放在 onInit 中。我已经这样做了。

每个步骤的 Angular Material Stepper 组件

但是，我仍然收到错误消息。

这是我在 Stackblitz 上的项目 - https://stackblitz.com/github/vigamage/stepper-component-wise

有人可以建议如何摆脱这个问题吗？

谢谢..

如何从 mat-h​​orizo​​ntal-stepper 中隐藏“mat-step”之一？
我已经设置了这个 css 属性：

但它不适用于“垫步”。

我不想从 DOM 中删除该元素，所以*ngIf在这里没用。

我在某个地方看到他们使用“

但这适用于整个 . 我只想隐藏一个。

我也试过

没有成功。

我有一个如下场景：

我的Angular应用程序中有一个页面，它使用stepper. 例如，当用户在第 3 步时，为了返回上一步（第 2 步），他要做的第一件合乎逻辑的事情是单击back button. 但显然，他会被重定向到上一页。

因此，我将能够stepper在返回单击时将其设置为上一个，而不是将用户重定向到最后一页，并且当他在第 1 步时将他重定向到最后一页。

我试图@HostListener通过强制转换this.stepper.previous();（将步进器设置为上一个的函数）来使用，但是当动作是catched该函数时，该函数没有被执行，并且页面无论如何都会被重定向回来。

那么如何防止页面在单击后退按钮时被重定向？

这是我尝试过的：

我有一个步进组件。在 stepper-component.html 中，我有四个组件作为 mat-steps，如下所示 -

我想通过单击不同组件中的按钮来访问组件2，比如组件 X，并在组件 2 中执行一些功能。我怎样才能做到这一点？

我正在使用 Angular Material 步进器，它在 1 个组件中作为整个代码运行良好。但是步进器将用于大约 10 个不同的组件。有 7 种不同类型的表单，如输入、选择、名称、表格等。所以我想我会将 stepper 分成单独的组件，其中每个组件都是一个步骤。所以，我决定为表格制作一个模板app-step-form

而不是像这样创建不同的步骤app-table-select

而不是像这样的步骤插入组件

所以我会有表单模板在不同的组件中使用，而不是每次都一个一个地创建。

但我面临的问题是，如果我使用上面显示的步骤组件，它在app-step-form. 对此进行小改动app-step-form并提取<mat-step></mat-step>

然后像这样取出mat-step并放入<ng-template>

使此步骤可见，app-step-form但不能从中传递步骤组件标签， <ng-template matStepLabel>Table </ng-template>并且此标签不可见或@Input()两者都不使用。

我花了 2 天的时间试图解决这个问题，寻找答案，但到目前为止还没有那么天真，也失去了如何克服这个问题以使我的步进器可重复使用的想法。

有谁知道如何使这个想法发挥作用？还是不可能按照我想象的方式进行？

还有任何想法如何使这些输入像 1 形式的一部分？子表单合并到 1 个表单还是什么？

我正在使用角度材料步进器在我的组件中导航，有以下按钮：

下面是我的 stepper.component.html 代码 <button [disabled]="myService.disableNextButton(stepper.selectedIndex)"> Next

然后我有一个使用 behaviorSubject 来存储 productId 的服务：

我正在使用 JEST 测试和 ts-mockito 来模拟我的服务，如下所示：

在我的测试中，我有以下内容：

问题是当我使用原始服务时，该按钮在启动时被禁用，但是当我模拟该服务时，它并没有禁用它。知道有什么问题吗？

所以我正在使用angular 11并努力获得以下行为：一个步进器，在一个步骤中有两个输入，即一个 datepicker 和一个 select（下拉菜单）。然后我希望 stepControl 验证两个字段都已填充，并能够检索它们的值。

在我的示例中，我有很多步骤，但这是给我带来麻烦的步骤。

HTML：

TS 声明：

ngOnInit 中的 TS：

为什么它不起作用：

我无法从此表单中检索值。此外，使用空字段验证表单会产生后端错误，但不会像您期望的那样被前端组件阻止（以红色亮起并表示该字段是必需的）。

非常感谢您的帮助 ！凯夫'。