我正在尝试将角材步进器用作进度跟踪器(我知道这并不意味着要……但是那是我所需要的唯一一个)。我的步进机有5个步骤。
我要在产品或物品达到该点时打开颜色。
我找到了mat-step-icon-selected
类。但这不起作用。
我将从API获取数据,该API将返回状态/步骤编号。 并以此为基础,改变颜色。
我无法更改班级的颜色。我尝试在ngClass
上使用mat-step
但这不起作用。
这是我的代码:
<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>
建议一种解决方案,以更新所显示步进器的颜色。
谢谢:)
答案 0 :(得分:1)
将此添加到组件的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>