Question

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

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

Answer 1

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

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

e.g。

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

Answer 2

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

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

Answer 3

您只需要使用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类定义为此

 .font-bold {
font-weight: bold
}

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

3 个答案: