angular - Angular 2+：将垫子分成两页

Question

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

谢谢

Answer 1

您可以根据您的问题创建一个动态的 FormGroups 数组：

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

这是一个基于角材料示例的正在运行的堆栈闪电战。

Answer 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