如何获取ons-icon动态加载图标?

问题描述

一段时间以来，我一直在使用ons-icon和angular2时遇到问题.

I've been having an issue with using the ons-icon and angular2 for a while.

<span *ngFor="let theIcon of item.getItem().style.get('icon')">
   <ons-icon [icon]="theIcon"></ons-icon> {{theIcon}}
</span>

尽管{{theIcon}}确实显示了正确的图标文字(md-餐具)，但ons-icon却从不显示图标.如果我将文本复制到控件中并将其更改为icon ="md-cutlery"，则显示效果很好.

While {{theIcon}} does display the proper icon text (md-cutlery), ons-icon never shows the icon. If I copy the text into the control and change it to icon="md-cutlery", it displays fine.

我想念什么?

推荐答案

在Angular2中，您可以使用不同的指令来创建绑定，对于属性，类和样式绑定.由于要创建属性绑定，因此需要执行以下操作: [attr.icon] ="myIconVar"

In Angular2 you have different directives to create bindings, you have directives for Attribute, Class, and Style Bindings. Since you want to create an attribute binding you need to do:[attr.icon]="myIconVar"

因此您的代码应为:

<span *ngFor="let theIcon of item.getItem().style.get('icon')">
   <ons-icon [attr.icon]="theIcon"></ons-icon> {{theIcon}}
</span>

这篇关于如何获取ons-icon动态加载图标?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！