アイコンを動的にロードする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-刃物）を表示しているが、ONSアイコンは、アイコンを示すことはありません。コントロールにテキストをコピーしてicon = "md-cutlery"に変更した場合、それは正常に表示されます。

私には何が欠けていますか？

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