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

Question

我尝试使用 [innerHTML]内<mat-option>的 <mat-select>这适用于下拉列表，但不适用于选定的值。

版本:

浏览器 Google Chrome 68.0.3440.106(官方版本)(64 位)

Angular 6.1.6

Angular Material 6.4.6

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

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

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