動的にアイコン名をIonic2に追加する

Question

私はIonic 2アプリケーションにアイコン名を動的に追加しようとしています。その理由は、動的であるモデルの属性のリストがあり、モデルがアイコン名を返しますイオン2の用途に適用される。

これは私のAPIから得た回答です。

{ 
    "type": "searchresult", 
    "count": 1, 
    "results": [ 
    { 
     "type": "room", 
     "url": "/api/room/1", 
     "id": 1, 
     "name": "name1", 
     "attributes": [ 
     { 
      "type": "attribute", 
      "url": "/api/room/1/attribute/1", 
      "name": "attribute1", 
      "icon": "people", 
      "valueType": "bool", 
      "value": "true" 
     }, 
     { 
      "type": "attribute", 
      "url": "/api/room/1/attribute/3", 
      "name": "attribute2", 
      "icon": "desktop", 
      "valueType": "bool", 
      "value": "true" 
     }, 
     { 
      "type": "attribute", 
      "url": "/api/room/1/attribute/4", 
      "name": "attribute3", 
      "icon": "md-videocam", 
      "valueType": "bool", 
      "value": "true" 
     }, 
     { 
      "type": "attribute", 
      "url": "/api/room/1/attribute/5", 
      "name": "attribute4", 
      "icon": "icon-chair", 
      "valueType": "int", 
      "value": "200" 
     } 
     ] 
    } 
    } 

これは私が現時点でIonic2アプリに持っているものです。

<ion-row no-padding *ngFor="let att of room.attributes"> 
    <ion-col width-20 no-padding text-center> 
     <ion-icon name="att.icon"</ion-icon> 
    </ion-col> 
</ion-row> 

ありがとうございます。ここでは何が起こる

Answer 1

は、使用時にname="att.icon"あなたは自分のname属性に平野単語att.iconを渡しているということですが、この場合attにオブジェクトがあるとiconこのobjectの鍵です。あなたが[name]代わりのnameのような結合性を利用したい、と述べた

：

<ion-icon [name]="att.icon"></ion-icon> 

コンパイラは現在の式の値を評価し、nameに値を代入します。

チェックデモ：

PLUNKER

---

その他の質問：

• Angular 2 : HTML property binding
• Property binding vs attribute interpolation

Answer 2

私が使用するもう一つの方法は次のとおりです。

<ion-icon name={{att.icon}}></ion-icon> 

同じことがまたimgタグ

<img src={{att.image}}/>