如何让 ons-icon 动态加载图标?
How to get ons-icon to load the icon dynamically?
一段时间以来,我一直在使用 ons-icon 和 angular2 遇到问题。
<span *ngFor="let theIcon of item.getItem().style.get('icon')">
<ons-icon [icon]="theIcon"></ons-icon> {{theIcon}}
</span>
虽然 {{theIcon}} 确实显示了正确的图标文本 (md-cutlery),但 ons-icon 从不显示图标。如果我将文本复制到控件中并将其更改为 icon="md-cutlery",它显示正常。
我错过了什么?
在 Angular2 中,您有不同的指令来创建绑定,您有 Attribute, Class, and Style Bindings 的指令。由于您要创建属性绑定,因此您需要执行以下操作:[attr.icon]="myIconVar"
所以你的代码应该是:
<span *ngFor="let theIcon of item.getItem().style.get('icon')">
<ons-icon [attr.icon]="theIcon"></ons-icon> {{theIcon}}
</span>
一段时间以来,我一直在使用 ons-icon 和 angular2 遇到问题。
<span *ngFor="let theIcon of item.getItem().style.get('icon')">
<ons-icon [icon]="theIcon"></ons-icon> {{theIcon}}
</span>
虽然 {{theIcon}} 确实显示了正确的图标文本 (md-cutlery),但 ons-icon 从不显示图标。如果我将文本复制到控件中并将其更改为 icon="md-cutlery",它显示正常。
我错过了什么?
在 Angular2 中,您有不同的指令来创建绑定,您有 Attribute, Class, and Style Bindings 的指令。由于您要创建属性绑定,因此您需要执行以下操作:[attr.icon]="myIconVar"
所以你的代码应该是:
<span *ngFor="let theIcon of item.getItem().style.get('icon')">
<ons-icon [attr.icon]="theIcon"></ons-icon> {{theIcon}}
</span>