Question

我无法设置图标颜色

我有一个具有5个垫式台阶的垫式水平步进器（例如，命名为A部分，B部分... E部分）。根据某些业务规则，每个零件（垫子步骤）可能具有不同的颜色。

我知道如何更改“选定的”垫阶或如何为所有垫阶（具有相同的颜色）更改颜色，但无法弄清楚如何动态更改它，因此每个零件可能具有不同的颜色图标背景颜色。

使用Angular v7

以下是将第三个垫式步骤图标设置为绿色的样式。 id确实可以，但是我不能在运行时从组件（打字稿）动态更改颜色。

::ng-deep .mat-step-header:nth-of-type(3) .mat-step-icon         {
    background-color: green!important; 
 }

我也尝试使用[ngClass]，但是当它用作垫步属性时会被忽略。仅当我将步骤标签放在其中并在其中使用时，它才起作用，但这不是必须的（我需要更改图标的背景颜色...而不是标签）。

预期结果：能够为每个步骤设置不同的列，具体取决于每个步骤的完成程度。（mat-step可以是黄色，红色，绿色和黑色的组合），

实际结果：无法根据组件变量设置更改图标颜色

Answer 1

问题实际上是关于通过TS控制CSS变量-我从this post here获得了帮助；

CSS：我们将3个变量分配给需要着色的3个图标
HTML：除了firstClass之外，我们还创建了两个div secondClass和<body>，我们可以为其分配唯一命名的变量color1，color2和color3;
由于我们使用的是'mat-table'，因此不能使用[ngStyle]或[ngClass]，因为这些材料元素是在运行时创建的，并且只能对其中任何一个进行操作{{1} }事件，因此我们在这里为2 divs和AfterViewInit标签分配值；

相关的 TS ：

<div class='firstClass'>
    <div class=' secondClass'>
        <mat-horizontal-stepper labelPosition="bottom" #stepper>
            <mat-step [stepControl]="firstFormGroup">
                <form [formGroup]="firstFormGroup">
                    <ng-template matStepLabel>Fill out your name</ng-template>
                    <mat-form-field>
                        <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
            </mat-form-field>
            <div>
                <button mat-button matStepperNext>Next</button>
            </div>
        </form>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup" optional>
        <form [formGroup]="secondFormGroup">
            <ng-template matStepLabel>Fill out your address</ng-template>
            <mat-form-field>
                <input matInput placeholder="Address" formControlName="secondCtrl" required>
            </mat-form-field>
            <div>
                <button mat-button matStepperPrevious>Back</button>
                <button mat-button matStepperNext>Next</button>
            </div>
        </form>
    </mat-step>
    <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        You are now done.
        <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button (click)="stepper.reset()">Reset</button>
        </div>
    </mat-step>
  </mat-horizontal-stepper>
  <div>
<div>

完成working stacblitz here

角材料：如何在TS中使用不同的背景色设置每个垫式水平步进式步进器图标

1 个答案: