在内部使用[innerHTML]

Question

我尝试在[innerHTML]的<mat-option>中使用<mat-select>，它适用于下拉列表，但不适用于所选值。

版本：

• 浏览器谷歌浏览器68.0.3440.106（官方版）（64位）
• Angular 6.1.6
• 角材料6.4.6
• bootstrap 4.1.3
• @ ng-bootstrap / by-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>

附加的屏幕捕获组件框未选中任务图标未呈现的位置和选定的组合框，其中图标正确呈现，显示问题。

选定的组合框：未呈现的图标

未选中的组合框：呈现的所有图标

简化stackblitz here。

这是一个错误还是我错过了什么？

Answer 1

我正在深入研究这个问题，并在导出hello组件时发现了unicode转换中的错误。

要解决此问题，请使用下面的代码替换您的代码

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库包

安装它应该工作...如果你有任何问题，请告诉我

祝好运