在 <mat-select><mat-option> 中使用 [innerHTML]答案

【问题标题】：use of [innerHTML] inside <mat-select><mat-option>在 <mat-select><mat-option> 中使用 [innerHTML]
【发布时间】：2019-02-07 04:23:08
【问题描述】：

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

版本：

浏览器 Google Chrome 68.0.3440.106（官方版本）（64 位）
Angular 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 here.

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

【问题讨论】：

您能否为此创建一个快速的 stackblitz 项目？
请从浏览器中指出已卸载的材料并将代码连同它的 css 一起粘贴，以便我可以帮助您
stackblitz 添加到问题
告诉我当你打开开发者工具 f12 并将选择器指向它时你看到了什么......你看到路径中的任何错误或其他什么
检查我的新答案，如果您仍然面临问题，请告诉我

标签： angular bootstrap-4 angular-material

【解决方案1】：

对于使用表单控件而不是 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>

【讨论】：

像魅力一样工作！但是对于年轻球员来说有一个陷阱：this.sanitizer.bypassSecurityTrustHtml(var)。我认为你也应该使用它（或var escArr = htmlArray.map(h => this.sanitizer.bypassSecurityTrustHtml(h))）。
在最新的 Angular 中，我认为这不是问题，因为它会自动清理 HTML（剥离脚本元素等）

【解决方案2】：

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

喜欢：

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

这是完整示例的外观：Online Demo

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;
      }
    `
  ]
})

【讨论】：

【解决方案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 库包

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

祝你好运

【讨论】：