0

我会在 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
}

但这里有另一个问题。这样我就不能设置两种不同的颜色。只有一个。我不能根据状态设置红色或绿色。有没有可能做到这一点？

4

1 回答 1

2

我认为这里而不是使用直接的十六进制代码作为颜色。您可以使用变量并根据可以设置背景颜色的条件在 .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')
 }
于 2020-06-15T13:27:33.317 回答