如何使用ons-icon动态加载图标?

时间:2016-08-20 13:14:07

标签: angular onsen-ui2

我一直遇到使用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”,则显示正常。

我错过了什么?

1 个答案:

答案 0 :(得分:1)

在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>