如何在 mat-stepper 中显示最后一个 mat-step 已完成? [英] How to show that the last mat-step is complete in mat-stepper?
问题描述
好的.我真不敢相信我是第一次就应该如此简单完成的事情发布问题，但我们来了.
Okay. I can't believe that I'm posting a question for the first time over something that should be so simple to accomplish, but here we are.
我希望在我的 mat-horizontal-stepper 中的最后一步在单击特定按钮后显示一个复选标记图标和绿色背景，就像之前步骤的图标一样.该按钮将是下图中的是，确认"按钮.
I would like for the final step in my mat-horizontal-stepper to display a checkmark icon and green background once a specific button is clicked, just like the icons for the steps prior to it. That button would be the 'Yes, confirm' button in the following image.
点击后，我希望带有数字 3 的蓝色图标变为我之前描述的复选标记图标，表示现在所有步骤都已完成.步骤 1 &2 自动执行此操作，因为一旦按下标记为 'matStepperNext' 的按钮，似乎就会将 'mat-step-icon-state-done' 类应用于它们.遗憾的是，第 3 步没有这样的按钮，所以必须手动完成.
Once clicked, I would like the blue icon with the number three to change into the checkmark icon that I previously described, indicating that all steps are now completed. Steps 1 & 2 do it automatically because it seems as if the 'mat-step-icon-state-done' class gets applied to them once a button marked as 'matStepperNext' is pressed. Sadly, Step 3 does not have such a button, so it must be done manually.
现在，我已经尝试了所有可以搜索到的东西.许多帖子建议使用带有状态的自定义图标 <ng-template></ng-template>，但这并没有奏效.其他人建议用 <代码>完成=真；editable=false;，但这也只在进入下一步时有效，这意味着它不适用于最后一步.我的假设是必须有某种方法以某种方式将 'mat-step-icon-state-done' 类添加到 mat-icon 中，但我不确定如何去做.另外，如果我完全没有预感，请随时为我指出正确的方向.
Now, I've tried everything that would come up for a search regarding this. Many posts suggest using custom icons with states using <ng-template></ng-template>, but that has not worked. Others have suggested marking the step with completed=true; editable=false;, but this only works when moving to the next step as well, which means it won't apply to the final step. My hypothesis is that there must be some way to add the 'mat-step-icon-state-done' class to the mat-icon somehow, but I'm not really sure how to go about doing that. Also, please feel free to point me in the correct direction if my hunch is completely off.
推荐答案
根据文档，似乎没有直接的方法可以做到这一点.有一个 completed 和 state 输入，我们可以在最终的
There doesn't seem to be a direct way to do this as per the docs. There is a completed and state input though which we can use on the final mat-step.
如果您在 stepper 的代码rel="nofollow noreferrer">GitHub，可以看到如下情况
If you see the code for the stepper on GitHub, you can see the following condition
if (step._showError && step.hasError && !isCurrentStep) {
return STEP_STATE.ERROR;
} else if (step.completed && !isCurrentStep) {
return STEP_STATE.DONE;
} else if (step.completed && isCurrentStep) {
return state;
}
这表明仅设置 completed 是不够的，因为最后一步仍将是当前步骤.但是正如我们从条件中看到的，我们现在需要做的就是同时更改 state.
This shows that setting completed alone is not sufficient since the final step will still be the current step. But as we can see from the condition, all we need to do now is change state as well.
在最后一个mat-step中，添加completed和state
<mat-step [completed]="completed" [state]="state">
<ng-template matStepLabel>Done</ng-template>
You are now done.
<div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button (click)="done()">Confirm</button>
</div>
</mat-step>
</mat-step>
Then control this in your component when the button is clicked.
然后在单击按钮时在您的组件中控制它.
completed: boolean = false;
state: string;
done() {
this.completed = true;
this.state = 'done';
console.log(this.firstFormGroup.valid);
console.log(this.secondFormGroup.valid);
}
<块引用>
注意:您可以使用表单的有效性来有条件地设置这两个变量或显示错误消息以提示用户完成其余的步进器.
Note: You can use the validity of the forms to conditionally set these two variables or show an error message to prompt the user to complete the rest of the steppers.
这是一个关于 StackBlitz 的工作示例.
Here is a working example on StackBlitz.
这篇关于如何在 mat-stepper 中显示最后一个 mat-step 已完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
