Javascript 根据条件选择角垫的样式

我使用的是

，当条件为真时，我希望有一些粗体样式的选项

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

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

下面是一个代码示例：

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

{{附录}

使用以下内容更改量程：

---

{{annexe}}

如果希望在选择后将该样式应用于选定值，则必须将其应用于选择自身。应用[style.font-weight]=“附件！=‘默认’？‘粗体’：‘正常’”到mat select应该可以做到这一点。最好将它放到组件中的公共位置，并从那个里引用它

---

请参阅-

将样式同时应用于

mat选择

和

mat选项

。对于

mat select

，您可以使用

selected

属性检查选择的值。您可以使用模板逻辑应用样式-如果不想：

{{food.viewValue}

您只是缺少了“=”运算符，虽然这是更好的代码，但在这种情况下它没有帮助，因为

=比较应该足够了。请参阅此-工作正常：。有时会出现此问题。如果能知道什么是“附件（）”将返回这里，那将是一件非常棒的事情。我相信这个函数不断返回一个数组，这可能会产生问题。我重复一遍，因为我不知道它返回了什么。您的代码中还发生了一些您没有显示的事情<代码>

适用于选定或未选定的列表项。您是否有其他样式，可能是全局定义的？“！=”应替换为“！==”不是这样-这很好：如果希望在选择后将该样式应用于选定值，则必须将其应用于选择本身。应用[style.font-weight]=“附件！=‘默认’？‘粗体’：‘正常’”到mat select应该可以做到这一点。请参阅-@G.Tranter您的stackblitz准确地显示了我所面临的问题，确实，它在下拉列表中是粗体的，但我希望它在输入时保持粗体，当选择不再聚焦时。

发生了什么事==？；）
<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>