0

在搜索了很多时间之后,我没有找到任何好的解决方案来解决我的问题。对于我们的应用程序,我必须在屏幕顶部显示订单进度。像下面的东西 在此处输入图像描述

但在我们的工作流程中,我们有许多步骤,准确地说是 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> 
4

1 回答 1

0

使用带有一些自定义功能的 matStepperIcon 模板来支持您的颜色更改逻辑怎么样。例如,您可以为每个步骤状态显示相同的模板(模板可以通过引用访问,也可以是不同的组件):

<ng-template matStepperIcon="chat">
<mat-icon>forum</mat-icon>
</ng-template>
于 2022-02-24T11:29:54.800 回答