javascript - 造型 Angular 垫-根据条件选择

Question

我正在使用 <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>

Answer 1

如果您希望该样式在选择后应用于所选值，则必须应用它来选择自身。将 [style.font-weight]="annexe != 'Default' ? 'bold' : 'normal'"应用于 mat-select 应该可以。最好将它带到组件中的公共(public)位置并从那里引用它。

请引用- https://stackblitz.com/edit/angular-xgnq4k?file=app/select-overview-example.ts