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

问题描述

我尝试在< mat-select> 的< mat-option> 内使用 [innerHTML] 下拉列表，但不包含所选值.

I try to use [innerHTML] inside <mat-option> of <mat-select> which works fine for the drop-down list, but not for the selected value.

版本:

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

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

In my example the used code is

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

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

The attached screen captures with combo box unselected where the task icon is not rendered and the selected combo box where the icons are correctly rendered, shows the problem.

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

Selected combo box: icon not rendered

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

Unselected combo box: all icons rendered

简化的stackblitz 此处.

Simplified stackblitz here.

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

Is this a bug or am I missing something?

推荐答案

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

The correct answer is to use <mat-select-trigger> element:

喜欢:

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

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

This is how it will look the full example: 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;
      }
    `
  ]
})

这篇关于在< mat-select>< mat-option>内部使用[innerHTML]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！