时间戳

首页 > 解决方案 > 造型角垫选择条件

javascript - 造型角垫选择条件

问题描述

我正在使用<mat-select>并且当条件为真时，我希望有一些带有粗体样式的选项。

目前，下拉选项中的选项是粗体的，但是一旦选择了选项，样式就不会应用于文本字段中的选择。

选择后如何将样式应用于文本字段？

这是一个代码示例：

<mat-form-field>
          <mat-label><span translate="entities.annexe"></span></mat-label>
          <mat-select [(ngModel)]="p.annexe" formControlName="annexe">
            <mat-option *ngFor="let annexe of annexesEnums()" [value]="getNameFromValue(annexe)">
              <span [style.font-weight]="annexe != 'Default' ? 'bold' : 'normal'">{{annexe}}</span>
            </mat-option>
          </mat-select>
 </mat-form-field>

标签： javascripthtmlcssangularangular-material

解决方案

将样式应用于mat-select和mat-option。对于mat-select，您可以使用selected属性检查选择的值。您可以使用模板逻辑应用样式 -selectionChange如果您不想使用事件，则不需要：

https://stackblitz.com/edit/angular-xgnq4k-743d3o?file=app/select-overview-example.html

<mat-select #select [style.font-weight]="select.value != 'default' ? 'bold' : 'normal'">
  <mat-option *ngFor="let food of foods" [value]="food.value" 
      [style.font-weight]="food.value != 'default' ? 'bold' : 'normal'">
    {{food.viewValue}}
  </mat-option>
</mat-select>

推荐阅读