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;
     }
   }

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