在内部使用 [innerHTML]<mat-select><mat-option>

Question

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

版本：

• 浏览器 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>

附加的屏幕截图显示了问题，其中组合框未选择，其中任务图标未呈现，而图标已正确呈现的所选组合框显示了问题。

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

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

此处简化了stackblitz。

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

Answer 1

正确答案是使用<mat-select-trigger>元素：

喜欢：

 <mat-select-trigger>
            <span [innerHTML]="nodeType.iconHtml"></span>
              <span> {{ nodeType.label }}</span>
        </mat-select-trigger>

这是完整示例的外观：在线演示

template: `
    <mat-form-field>
      <mat-select [(ngModel)]="nodeType" placeholder="NodeType">
      <mat-select-trigger>
        <span [innerHTML]="nodeType.iconHtml"></span>
          <span> {{ nodeType.label }}</span>
    </mat-select-trigger>
        <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;
      }
    `
  ]
})

Answer 2

对于使用表单控件而不是 ngModel 尝试此操作的任何人（包括未来的我），您可以这样做：

<mat-select #mSelect formControlName="controlName">
  <mat-select-trigger>
    <span [innerHTML]="htmlArray[mSelect.value]"></span>
  </mat-select-trigger>
  <mat-option *ngFor="let html of htmlArray; let idx = index"
              [value]="idx">
     <span [innerHTML]="html"></span>
  </mat-option>
</mat-select>

Answer 3

我正在深入研究这个问题，并在导出 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 库包

安装它，它应该可以工作……如果您有任何问题，请告诉我

祝你好运