angular - 使用 Ionic2 动态添加图标名称

Question

我正在尝试将图标名称动态添加到我的 Ionic 2 应用程序中，原因是我的模型上有一个动态属性列表，该模型将图标名称返回到 ionic 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" 时，您只是传递了 plain word att.icon到你的 name attribute，但在这种情况下 att 是一个对象，icon 是这个 对象。

也就是说，您想使用 [name] 而不是 name 的属性绑定(bind):

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

编译器现在将评估表达式的值并将该值分配给 name。

查看演示:

PLUNKER

---

其他问题:

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