1. 首页
  2. 问题列表
  3. 改变背景色步进角材料与条件
提问者：小点点

改变背景色步进角材料与条件


我会在一个有角的材料项目中动态改变步进器的颜色。 每个步骤都可以有多个状态。 例如:

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种不同的颜色。 就一个。 我不能根据州的不同设置红色或绿色。 有没有可能做到这一点？


共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')
 }

相关问题