[英]Angular Material Stepper, Dynamic color change
我正在尝试使用角度材料步进器作为进度跟踪器(我知道它不适合它......但这是唯一符合我要求的)。 我的步进器有 5 个步骤。
我想在产品或物品达到那个点时打开颜色。 我找到了为它mat-step-icon-selected
的类mat-step-icon-selected
。 但它不起作用。
我将从会返回状态/步骤编号的 API 中获取数据。 并基于此我需要改变颜色。
我无法更改课程的颜色。 我尝试在mat-step
上使用ngClass
但它不起作用。
这是我的代码:
<mat-horizontal-stepper [linear]="true">
<mat-step>
<ng-template matStepLabel >
Initiated
</ng-template>
</mat-step>
<mat-step [className]="isTrue ? 'mat-step-icon-selected' : ''">
<ng-template matStepLabel>PM</ng-template>
</mat-step>
<mat-step #stepper>
<ng-template matStepLabel>HM</ng-template>
</mat-step>
<mat-step>
<ng-template matStepLabel>BU</ng-template>
</mat-step>
<mat-step>
<ng-template matStepLabel>FT</ng-template>
</mat-step>
</mat-horizontal-stepper>
建议一个解决方案来更新显示的步进器的颜色。
谢谢 :)
将此添加到您组件的 css 文件中:
:host ::ng-deep .mat-step-icon-selected {
color: green; // your styles
}
要动态设置步骤,请尝试如下操作:
.ts
import { MatStepper } from "@angular/material";
@ViewChild("stepper") private stepper: MatStepper;
selectStep(index) {
this.stepper.selectedIndex = index;
}
.html
<mat-horizontal-stepper [linear]="true" #stepper>
...
</mat-horizontal-stepper>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.