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 属性< / em>，但在这种情况下，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>

同样适用于src img标记

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

Answer 3

您可以像<ion-icon name="{{att.icon}}"></ion-icon>一样使用它。

Answer 4

当数据来自ngFor时，我不得不使用它：

[attr.name] =“ ngForItem.name”

（使用您的代码）：

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

使用Ionic2动态添加图标名称

4 个答案: