如何显示垫式踏步机中的最后一个垫式踏步已完成？

Question

好的。我不敢相信我是第一次完成一个很简单的问题，但是我们就在这里。

我希望在单击水平按钮时在我的水平垫子步进器的最后一步中显示一个选中标记图标和绿色背景，就像之前的步骤的图标一样。该按钮将是下图中的“是，确认”按钮。

单击后，我希望将带有数字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中，但是我不确定如何做到这一点。另外，如果我的直觉完全消失了，请随时将我指向正确的方向。

Answer 1

根据文档，似乎没有直接的方法可以做到这一点。有completed和state输入，但我们可以在最后的mat-step上使用。

如果您在GitHub上看到stepper的代码，则可以看到以下情况

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。

在最后一个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>

然后在单击按钮时在组件中进行控制。

completed: boolean = false;
state: string;

done() {
    this.completed = true;
    this.state = 'done';
    console.log(this.firstFormGroup.valid);
    console.log(this.secondFormGroup.valid);
}

  

注意：您可以使用表格的有效性有条件地设置这两个变量，或者显示错误消息以提示用户完成其余的步进器。

这是StackBlitz上的一个有效示例。