使用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"只是将普通单词 传递att.icon给你的name 属性,但在这种情况下att是一个对象,并且icon是这个的关键object.

也就是说,你想使用属性绑定[name]而不是name:

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

编译器现在将评估表达式的值并将值赋给name.

查看演示:

PLUNKER

其他问题:

• Angular 2:HTML属性绑定
• 属性绑定与属性插值