如何让 ons-icon 动态加载图标？

【问题标题】：How to get ons-icon to load the icon dynamically?如何让 ons-icon 动态加载图标？
【发布时间】：2016-08-20 13:14:07
【问题描述】：

一段时间以来，我一直在使用 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】：

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

【讨论】：