Ударить часть текста в раскрывающемся списке в угловой материал - PullRequest
Новая
       3

Ударить часть текста в раскрывающемся списке в угловой материал

1 голос
/ 06 ноября 2019

Часть моего текста в <mat-option> должна быть поражена. Проблема в том, что выбранное значение теряет свой HTML-тег.

Это раскрывающийся список:

enter image description here

И это выбранное значение:

enter image description here

Это HTML-код: 

   <div fxLayout="row" fxLayoutAlign="start baseline">
      <span fxFlex="0 0 110px" class="text-sm text-muted-dk">Currency Position</span>
      <div fxLayout="column" fxFlex>
        <mat-form-field fxFlex>
          <mat-select #navigationArrowMode [formControl]="form.controls['currencyPosition']">
            <mat-option
              *ngFor="let currencyPosition of currencyPositions"
              [value]="currencyPosition"
            >
              {{ CurrencyPositionToLabelMapping[currencyPosition] }}</mat-option
            >
          </mat-select>
        </mat-form-field>
      </div>
    </div>

Машинописный код: 

    this.PriceOrderToLabelMapping = {
      [PriceOrders.OriginalFirst]: `<del>$110</del>&nbsp;$99&nbsp;Sale`,
      [PriceOrders.SalePriceFirst]: `$99&nbsp;Sale&nbsp;<del>$110</del>`
    };

1 Ответ

1 голос
/ 07 ноября 2019

Что вам нужно сделать, это реализовать элемент <mat-select-trigger> с помощью innerHTML, например: 

 <mat-select-trigger>
       <span [innerHTML]="foodCtrl?.viewValue"></span>
    </mat-select-trigger>

Полный пример будет: Онлайн-демонстрация 

<mat-form-field>
  <mat-label>Food selection</mat-label>
  <mat-select name="foodCtrl" [(ngModel)]="foodCtrl" >
    <mat-select-trigger>
       <span [innerHTML]="foodCtrl?.viewValue"></span>
    </mat-select-trigger>
    <mat-option *ngFor="let food of foods" 
    [value]="food" >
      <span [innerHTML]="food.viewValue"></span>
    </mat-option>
  </mat-select>
</mat-form-field>
...