禁用时如何更改Angular 5材质中的样式-选择选定文本答案

【问题标题】：How to change the style in Angular 5 material mat-select selected text when disabled禁用时如何更改Angular 5材质中的样式-选择选定文本
【发布时间】：2018-10-09 10:16:15
【问题描述】：

当 Angular 5 材质垫选择设置为禁用时，如何更改显示所选值的文本上的字体颜色。目前它默认为灰色，我想更改它，以便在禁用和启用时都显示深蓝色。

  <mat-form-field>
    <mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
      <mat-option *ngFor="let prod of products" [value]="prod.productID">
        {{ prod.key }}
      </mat-option>
    </mat-select>
  </mat-form-field>

【问题讨论】：

标签： css angular colors angular-material

【解决方案1】：

了解如何在禁用 mat-select 元素时更改字体颜色。上面的 ngClass 对字体颜色不起作用。它确实适用于字体大小。

Styling mat-select in angular-material 链接的答案最多，除了覆盖禁用字体颜色，您需要覆盖样式 .mat-select-value-text

例如

::ng-deep .mat-select-value-text {
  color: rgba(0,0,0,.88);
}

【讨论】：

这是旧的角度规则
工作就像一个魅力。 Angular 7 + 材质 7.3

【解决方案2】：

您只需要使用 ngClass 并传递适当的条件来设置选项的样式。我正在考虑 selected 是数字。如果它是 FormControl，那么只需更改 prod?.productID==selected.value}

<mat-form-field>
<mat-select placeholder="Select a Product" [(ngModel)]="selected" [disabled]="isDisabled" panelClass="my-select-panel-class">
  <mat-option *ngFor="let prod of products" [value]="prod.productID" [ngClass]="{'font-bold':prod?.productID==selected}>
    {{ prod.key }}
  </mat-option>
</mat-select>

在这个组件的 CSS 中定义一个类 Font-bold 为 this

 .font-bold {
font-weight: bold
}

【讨论】：

【解决方案3】：

使用 ngClass。你可以传递一个带有匹配 CSS 类的条件和字符串的对象。像这样的：

看这里https://angular.io/api/common/NgClass

【讨论】：