использование [innerHTML] внутри <mat-select> <mat-option>

Question

Я пытаюсь использовать [innerHTML] внутри <mat-option> из <mat-select>, который отлично работает для раскрывающегося списка, но не для выбранного значения.

Версии:

• Браузер Google Chrome 68.0.3440.106 (официальная сборка) (64-разрядная версия)
• Угловой 6.1.6
• Угловой материал 6.4.6
• начальная загрузка 4.1.3
• @ ng-bootstrap / ng-bootstrap 3.2.0

В моем примере используется код

<mat-form-field class="col-11">
  <mat-select 
    [(ngModel)]="node.nodeType" 
    (change)="nodeTypeChanged()" 
    placeholder="{{'node.node_type' | translate}}"
    [compareWith]="compareObjects">
    <mat-option 
      *ngFor="let item of nodeTypes" 
      [value]="item">
      <span [innerHTML]="item.iconVisual.iconCodeHtml"></span>
      <span> {{item.label}}</span>
    </mat-option>
  </mat-select>
</mat-form-field>

Прикрепленный снимок экрана с невыбранным полем со списком, где значок задачи не отображается, и с выбранным полем со списком, где значки отображаются правильно, отображается проблема.

Выбранное поле со списком: значок не отображается

Не выбрано поле со списком: все иконки отображаются

Упрощенный стек здесь .

Это ошибка или я что-то упустил?

Answer 1

Я копался в проблеме и обнаружил ее ошибку при преобразовании юникода при экспорте компонента hello.

Чтобы исправить эту проблему, замените ваш код на приведенный ниже

import { Component, Input } from '@angular/core';
import {
svg,
img,
png,
png2x,
png3x,
aliases,
icons,
iconsByUnicodeHex
} from 'font-awesome-assets';

@Component({
selector: 'hello',
template: `
<mat-form-field>
<mat-select [(ngModel)]="nodeType" placeholder="NodeType">
<mat-option *ngFor="let item of nodeTypes" [value]="item">
<span [innerHTML]="item.iconHtml"></span>
<span> {{item.label}}</span>
</mat-option>
</mat-select>
</mat-form-field>`,
styles: [`h1 { font-family: Lato; }`] 
})

export class HelloComponent  {
@Input() name: string;
nodeType ;
nodeTypes = [ 
{
  label: 'Task',
  iconHtml: '<i class="fa">&#xf0e7;</i>'
}, 
{
  label: 'Project',
  iconHtml: svg('briefcase', rgba(0,0,0,0.5))
}
]

ngOnInit() {
this.nodeType = this.nodeTypes[1];
}
}

Он должен попросить вас установить недостающий пакет библиотеки font-awesome, когда вы замените код

Установите его, и оно должно работать ... дайте мне знать, если у вас возникли проблемы

удачи