0

我正在尝试使用角度材料步进器作为进度跟踪器（我知道它不是为此而设计的......但这是唯一符合我要求的）。我的步进器中有 5 个步骤。

我想在产品或项目达到该点时打开颜色。我 mat-step-icon-selected为它找到了课程。但它不起作用。

我将从返回状态/步骤编号的 API 中获取数据。并基于此我需要改变颜色。

我无法更改班级的颜色。我尝试使用ngClassonmat-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>

建议一个解决方案来更新所显示的步进器的颜色。

谢谢 ：）

4

1 回答 1

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>
于 2020-02-04T11:41:16.157 回答