在搜索了很多时间之后,我没有找到任何好的解决方案来解决我的问题。对于我们的应用程序,我必须在屏幕顶部显示订单进度。像下面的东西
但在我们的工作流程中,我们有许多步骤,准确地说是 15 个。我想使用 mat-stepper 来实现相同的功能,因为它具有滚动选项,但我一直在更改相同的颜色和图标以及如何根据某些条件更改颜色。如果状态与阵列状态匹配,我想用蓝色显示,其余的用绿色显示完成。
.ts 文件
workFlowStatus: [] = [
'Received', 'Approved by Manager', 'Returned by Manager', 'resubmitted', 'Billed', 'Approved by Area Manager'
];
status = 'Approved by Area Manager';
.html
<mat-horizontal-stepper class="step" [linear]="isLinear" #stepper>
<mat-step *ngFor="let step of workFlowStatus; let i = index">
<ng-template matStepLabel>{{ step }}</ng-template>
</mat-step>
</mat-horizontal-stepper>