标签: mat-stepper

好的。我不敢相信我是第一次就一些本来应该很容易完成的事情提出问题，但我们已经到了。

我希望我的 mat-h​​orizo​​ntal-stepper 中的最后一步在单击特定按钮后显示复选标记图标和绿色背景，就像之前步骤的图标一样。该按钮就是下图中的“是，确认”按钮。

单击后，我希望带有数字 3 的蓝色图标变为我之前描述的复选标记图标，表明所有步骤现已完成。步骤 1 和 2 会自动执行，因为一旦按下标记为“matStepperNext”的按钮，似乎“mat-step-icon-state-done”类就会应用于它们。遗憾的是，步骤 3 没有这样的按钮，因此必须手动完成。

现在，我已经尝试了与此相关的搜索中可能出现的所有内容。许多帖子建议使用自定义图标，并使用 状态<ng-template></ng-template>，但这并没有奏效。其他人建议用 标记该步骤completed=true; editable=false;，但这仅在移至下一步时才有效，这意味着它不适用于最后一步。我的假设是，必须有某种方法以某种方式将“mat-step-icon-state-done”类添加到 mat-icon 中，但我不太确定如何去做。另外，如果我的预感完全错误，请随时为我指出正确的方向。

vertical line是否可以在最后一步中扩展？

模板脚本可以阻止它：

<div class="mat-vertical-content-container" [class.mat-stepper-vertical-line]="!isLast">

这就是现在最后一步的情况：

这是所期望的：

感谢您的任何建议。

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

<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>

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

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

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

我正在使用Angular Material Stepper组件。

在我的内容中，我有单独的按钮，当当前步骤中的任务完成时，这些按钮可以帮助用户移至下一步。

我想防止用户通过单击步进器组件的步骤按钮来访问下一步。

但是，我希望用户能够通过步进器组件的步进按钮返回上一步。

我不在步进器内使用表格。我已经看到了组件的Linear属性，但是它不符合我的要求。

简而言之，通过单击步进器组件的步骤按钮来防止用户进入“未访问”的步骤。

我正在尝试实现一个 mat-stepper，它在每个步骤中都有不同的组件。我需要将数据从第一步传递到下一步，所以我基本上使用 @ViewChild 和 @Input 来做到这一点。但是，我希望每个步骤中的组件仅在控件移动到该步骤时才被初始化，而不是在最开始时。我尝试使用其中的组件，就像我们如何延迟加载 mat-tabs 一样，但它似乎不起作用。有解决方法吗？

我正在Angular 6中使用Angular材质进行项目，并且在一个特定的路线中，我有一个垫式isLinear=true踏步机，该垫具有6步，配置为，因此用户无法继续下一步，直到完成实际步骤，依此类推。

但是当涉及到第5步时，是否有一个执行某些操作的按钮，并且在用户单击该按钮之后，我想防止用户退后并更改先前完成的数据。

我已经禁用了后退按钮，但是用户可以单击步进器顶部显示的步骤标题返回到先前完成的任何步骤。

我正在使用 Angular 6 mat-h​​orizo​​ntal-stepper。我想给它一些特定的宽度，并希望将其保留在页面的中心。对于 mat-h​​orizo​​ntal-content-container 我能够将其保持在中心

.mat-horizontal-content-container 
    text-align: center;
    overflow: hidden;
    padding: 0;

但是如何将标题保持在页面中心。我正在尝试这个，但它不起作用。

.mat-stepper-label-position-bottom .mat-horizontal-stepper-header-container 
    width: fit-content !important;
    align-items: center;

谁能帮我解决这个问题吗？