角度垫步更改图标颜色

Question

我需要根据我的数组属性更改垫步图标（角度材料步进器）的背景颜色：etape.etat。

    <div *ngFor="let etape of pro.etapes; let i=index">

      <mat-step *ngIf="etape.etat == 1" style="background-color: yellow;">
        <ng-template matStepLabel> {{ etape.nomEtape }} </ng-template>
      </mat-step>

      <mat-step *ngIf="etape.etat ==2" style="background-color: green;">
        <ng-template matStepLabel> {{ etape.nomEtape }} </ng-template>

      </mat-step>

      <mat-step *ngIf="etape.etat ==2" style="background-color: red;">
        <ng-template matStepLabel> {{ etape.nomEtape }} </ng-template>

      </mat-step>

    </div>
    </mat-horizontal-stepper>

但是，背景颜色只能使用 :

::ng-deep .mat-step-header .mat-step-icon{
  background-color: red; 
}

是否有可能根据条件动态更改垫步图标颜色？

Answer 1

在 HTML 中：使用 [ngClass] 并将条件设置为 classYellow 或 classGreen 或 classRed；

在 TS 中：操作进入 HTML 条件的变量

在 CSS 内部：从您放置 ngClass 的位置遍历到 mat-step-icon 以设置背景颜色...类似于：

::ng-deep .classYellow. mat-step-header .mat-step-icon{
  background-color: yellow; 
}

样本stackblitz here