Question

我尝试在[innerHTML]的{{1}}内使用<mat-option>，这对下拉列表有效，但不适用于所选值。

版本：

浏览器Google Chrome 68.0.3440.106（正式版）（64位）
角度6.1.6
角材料6.4.6
引导程序4.1.3
@ ng-bootstrap / ng-bootstrap 3.2.0

在我的示例中，使用的代码是

<mat-select>

捕获的屏幕截图显示未选中未显示任务图标的组合框，而正确显示了图标的所选组合框显示了问题。

所选组合框：图标未呈现

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

简化的堆叠突击here。

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

Answer 1

正确的答案是使用<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;
      }
    `
  ]
})

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

当您替换代码时，它应该要求您安装缺少字体真棒库的软件包

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

祝你好运

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

3 个答案: