Angular 7 - 根据条件更改 Mat-select-value 的颜色

Question

我有一个垫子选择，我想根据条件更改所选值的颜色。基本上是为了向用户表明已进行更改。我知道我可以从样式中访问

mat-select-value

，但不确定如何使用 ng-class 对其实现条件：

<mat-form-field>
      <mat-select name="list"  
      [style.color]="myCondtition ? 'none': 'green'"
      (selectionChange)="change()">
        <mat-option *ngFor="let option of options" [value]="currentOption">
          {{option.viewvalue}}
         </mat-option>
      </mat-select>

我能够让

[style.font-weight]

、

[style.background-color]

和

[style.font-size

] 等功能正常工作，但没有

font-color

，只有 [style.color] 似乎只能与输入一起使用。

Answer 1

您可以在条件下使用普通类属性

<mat-select class="{{myCondition ? 'one' : 'two'}}" > ... </mat-select>

并将样式赋予相应的类

::ng-deep {
    .two .mat-select-value-text {
      color : red;
     }
     .one .mat-select-value-text {
      color : green;
     }
   }

https://stackblitz.com/edit/angular-mat-select-example-6rylbe?file=src%2Fapp%2Fapp.component.html