根据垫子选项更改垫子选择的颜色

Question

所以我有一个下拉列表：

<div class="drop-down" >    
<mat-select>
<mat-option *ngFor="let role of roles | keyvalue" [value]="role">
{{role['value']}}
</mat-option>
</mat-select>      
</div>

角色是一个枚举：

export enum Role {
a='Software Tester (Manual)',
b='Software Tester (Automation)',
c='Software Tester',
d='System Tester'
}

我想根据从下拉菜单中选择的选项更改mat-select的颜色。我认为使用ngClass是一个解决方案，但基于所选的enum值，我真的不知道如何在这种情况下使用它。

Answer 1

下面是您想要实现的stackblitz演示。

我使用ngClass指令和mat-select上的selectionChange事件来检测选项选择。

Answer 2

您可以尝试ng风格的

ng-style="IfCondition1 ? checkAnotherCondition && {'color':'red'} : {'color': 'green','font-weight':'bolder'}"