小编Vij*_*iya的帖子

将数据传递到基于组件的 mat-stepper 中的下一步

我正在使用基于组件的垫步进器组件来显示线性过程。每个步骤都有自己的组件,如下所示

<mat-card>
    <mat-horizontal-stepper [linear]="isLinear" labelPosition="bottom" #stepper>
    
    <!-- Step-1 -->
    <mat-step [stepControl]="firstFormGroup">
       <ng-template matStepLabel>Select Items</ng-template>
       <select-item-component>
       <select-item-component>
       <div class="mt-5">
          <button mat-flat-button color="primary" matStepperNext>Next</button>
       </div>
    </mat-step>
    
    <!-- Step-2 -->
    <mat-step [stepControl]="firstFormGroup">
       <ng-template matStepLabel>Add Quantity</ng-template>
       <add-qty-component>
       <add-qty-component>
       <div class="mt-5">
          <button mat-flat-button color="primary" matStepperNext>Next</button>
       </div>
    </mat-step>
    
    <!-- Step-3 -->
    <mat-step [stepControl]="firstFormGroup">
       <ng-template matStepLabel>Conform</ng-template>
       <conform-step-component>
       <conform-step-component>
       <div class="mt-5">
          <button mat-flat-button color="primary" matStepperNext>Done</button>
       </div>
    </mat-step>
    </mat-horizontal-stepper>
 </mat-card>
Run Code Online (Sandbox Code Playgroud)

步骤 1 显示多选项目列表,并将所选项目列表传递到下一个步骤 2,并在步骤 2 中添加每个项目的数量。

如何在下一步单击时将所选项目从步骤 1 传递到步骤 2,并显示传递的项目以在步骤 2 中输入数量?

我创建了一个公共服务层来设置和获取选定的项目。ngOnInit步骤 2 的组件尝试从公共服务获取所选列表,但问题是组件 2 在下次单击之前已启动。 …

javascript components angular mat-stepper

4
推荐指数
2
解决办法
1万
查看次数

标签 统计

angular ×1

components ×1

javascript ×1

mat-stepper ×1