angular - 在里面使用 [innerHTML]
问题描述
我尝试使用[innerHTML]
inside which 适用<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>
附加的屏幕截图中未选择未呈现任务图标的组合框,并且正确呈现了图标的选定组合框显示了问题。
选定的组合框:未呈现图标
未选中的组合框:呈现所有图标
在这里简化了 stackblitz 。
这是一个错误还是我错过了什么?
解决方案
正确答案是使用<mat-select-trigger>
元素:
像:
<mat-select-trigger>
<span [innerHTML]="nodeType.iconHtml"></span>
<span> {{ nodeType.label }}</span>
</mat-select-trigger>
这是完整示例的外观:在线演示
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;
}
`
]
})
推荐阅读
- ios - 确定您的应用程序之前是否在 iOS 中安装过
- unity3d - SVG 导入器不会以相同大小导入 SVG
- python - 为什么代码写出间隔的行?
- go - 为什么 sleep 会禁用 go 中的互斥锁?
- clojure - 为什么这些 `select` 元素没有被渲染?
- kivy - 在 Android 上的 kivymd 中使用 python 3.8 exchangelib 时出错
- ios - 如何使用组合框架有多个请求
- python - SageMaker 批量转换因 ID 列而失败
- javascript - 如何从 Firebase 的 firestore 中提取数据可靠地响应本机应用程序
- android-studio - 当我在 android studio 上运行 Flutter 应用程序“无法初始化类 org.codehaus”时突然出现此故障