Укладка углового коврика на выбор

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

Применить стиль к 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 2

Если вы хотите, чтобы этот стиль применялся к выбранному значению после выбора, вам придется применить его для выбора самого себя.Применение [style.font-weight] = "annexe! = 'Default'? 'Bold': 'normal'" к mat-select должно сделать это.Было бы лучше взять его в общее место в компоненте и отослать его оттуда.

Пожалуйста, обратитесь - https://stackblitz.com/edit/angular-xgnq4k?file=app/select-overview-example.ts

Answer 3

Измените интервал с помощью:

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

Answer 4

вы можете использовать директиву ngClass , чтобы изменить css вашего выпадающего списка в зависимости от условий, например:

       <div [ngClass]="{
        'cssStyle1': condition === "xx",
        'cssStyle2': condition === "yy",
        'cssStyle2': condition === "zz",
        }"></div>

Затем вы определяете свои классы cssStyleX в файле css для выполнения wahtты хочешь