造型角垫选择条件答案

【问题标题】：Styling angular mat-select on condition造型角垫选择条件
【发布时间】：2020-01-24 15:28:51
【问题描述】：

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

【问题讨论】：

您的代码发生了其他未显示的事情。 <span [style.font-weight]="'bold'"> 适用于选定或未选定的列表项。你有任何其他风格，也许是全球定义的？
'!=' 应替换为 '!=='
不是这样 - 这很好用：stackblitz.com/edit/angular-2v4nt7?file=app/…
如果您希望在选择后将该样式应用于所选值，则必须将其应用于选择本身。将 [style.font-weight]="annexe != 'Default' ? 'bold' : 'normal'" 应用于 mat-select 应该可以做到。请参考-stackblitz.com/edit/angular-xgnq4k?file=app/…
@G.Tranter your stackblitz shows exactly what i'm facing, indeed, it is bold in the dropdown, but I would like it to stay bold in the input, when the select is no longer focused .

标签： javascript html css angular angular-material

【解决方案1】：

使用以下更改您的跨度：

<span [style.font-weight]="annexe !== 'Default' ? 'bold' : 'normal'">{{annexe}}</span>

【讨论】：

你只是缺少 '=' 运算符
虽然是更好的代码，但在这种情况下它并没有帮助，因为 != 比较应该就足够了。看到这个 - 工作正常：stackblitz.com/edit/angular-2v4nt7?file=app/….
有时会出现此问题。知道'annexesEnums（）'在这里返回什么也会更好。我相信这个函数会不断返回一个可能会产生问题的数组。我重复一遍，因为我不知道它会返回什么。

【解决方案2】：

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

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

【讨论】：

!== 发生了什么事？ ;)

【解决方案3】：

将样式应用于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>

【讨论】：