Angular 2+：将垫子分成两页答案

【问题标题】：Angular 2+: Divide mat step into 2 pagesAngular 2+：将垫子分成两页
【发布时间】：2023-03-05 04:47:01
【问题描述】：

我在我的应用程序中使用垫子步进器。但是根据用户在一个步骤上的操作，接下来的步骤会有所不同（显示的组件不会相同）。在一种情况下，我需要为下一步显示 2 页而不是 1 页。有没有办法将一个垫子步骤分成2页，或者动态添加一个步骤？

谢谢

【问题讨论】：

标签： angular angular-material material-design angular5 angular-material-stepper

【解决方案1】：

您可以创建一个动态的 FormGroups 数组，根据您的问题进行更改：

<mat-step *ngFor="let stepFormGroup of stepFormGroups;
 let i = index " [stepControl]="stepFormGroup">
    <form [formGroup]="stepFormGroup">...

Here is a running stackblitz 基于角材料示例。

【讨论】：

如果每个步骤都是一样的，这将起作用，这绝对不是我的情况，每个步骤都是完全不同的。
是的，我明白了，我只是简单地举例说明。要提出不同类型的问题，您可以创建自定义模板。稍后我将尝试使用模板更改示例。
这里有一个更复杂的例子，有两种不同的问题：stackblitz.com/edit/stackoverflow-51058549-2

【解决方案2】：

要在 MatStepper 中动态添加步骤，您可以这样做，

<mat-horizontal-stepper>
<mat-step>
    <input type="text" [(ngModel)]="name" name="nm">
</mat-step>
<mat-step *ngIf="name === 'John'">
      <!---- your code ------->
</mat-step>
<mat-step *ngIf="name === 'Jane'">
      <!---- your code ------->
</mat-step>

要一次显示两个页面，可以使用mat-tab

【讨论】：

感谢您的回答。我在发布答案之前考虑过，但它不依赖于任何变量或字段，它取决于用户单击哪个按钮。我仍然可以通过创建布尔变量和函数来切换值来使用此解决方案。我本来希望避免创建许多变量和函数来使其工作，但如果没有其他方法我想我会使用这个解决方案。