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

Question

一段时间以来，我一直在使用 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"，则显示正常。

我错过了什么？

Answer 1

在 Angular2 中，你有不同的指令来创建绑定，你有Attribute、Class 和 Style Bindings的指令。由于您要创建属性绑定，因此您需要执行以下操作：[attr.icon]="myIconVar"

所以你的代码应该是：

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