相关疑难解决方法(0)

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

我尝试用[innerHTML]里面<mat-option><mat-select>工作正常的下拉列表中,而不是选择的值。

版本:

  • 浏览器 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>
Run Code Online (Sandbox Code Playgroud)

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

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

在此处输入图片说明

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

在此处输入图片说明

此处简化了stackblitz 。

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

angular-material bootstrap-4 angular

3
推荐指数
1
解决办法
2457
查看次数

标签 统计

angular ×1

angular-material ×1

bootstrap-4 ×1