在<mat-select><mat-option>中使用[innerHTML] [英] use of [innerHTML] inside <mat-select><mat-option>
问题描述
我尝试在 <mat-option>
的 <mat-select>
中使用 [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?
推荐答案
正确答案是使用
元素:
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]的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!