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即可。最好将它带到组件中的通用位置，然后从那里引用它。

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

Answer 2

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

Answer 3

使用以下内容更改您的跨度：

{ "Model": { "name": "name_01", "description": "name_01", "features": { "name": "feature 01", "description": "feature 01" } } }

造型角垫-根据条件选择

3 个答案: