Question

我将在Angular Material项目中动态更改步进器的颜色。我每一步都可以有多个状态。例如：

state: OK (should be green)
state: REFUSED (should be red)

所以，这就是我到目前为止所做的

<mat-horizontal-stepper>
                     <mat-step state="schedule">
                        <ng-template matStepLabel>
                            <span [ngClass]="{'ok-step': status == 'OK', 'step-refused': status == 'REFUSED'}" *ngIf="(status == 'OK' || status == 'REFUSED'); else default">
                                {{status}}
                            </span>
                            <ng-template #default>
                                Default state
                            </ng-template>
                        </ng-template>
                    </mat-step>
 </mat-horizontal-stepper>

在这里，我可以动态更改文本的颜色。有用。但是我无法更改步进器背景的颜色。我可以这样：

::ng-deep.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
    background-color: #dd2c00 !important
}

但这是另一个问题。这样，我无法设置2种不同的颜色。只有一个。我不能根据状态设置红色或绿色。有可能这样做吗？

Answer 1

我想在这里不要使用直接的十六进制代码作为颜色。您可以根据可以设置背景颜色的条件使用该变量并在.ts文件中设置变量的值。

因此，根据我的解决方案，您应该将.scss文件更新为以下代码

 ::ng-deep.mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon- 
   state-done, .mat-step-header .mat-step-icon-state-edit {
   background-color: var(--background)!important
   }

并且您应该在.ts文件中添加以下行

if(status === 'Ok')
 {
  document.body.style.setProperty('--background', 'red')
 }
 else if(status === 'REFUSED')
 {
 document.body.style.setProperty('--background', 'red')
 }

根据条件更改背景色步进角材料

1 个答案: