J'essaie d'ajouter dynamiquement des noms d'icônes à mon application Ionic 2, la raison en est que j'ai une liste d'attributs sur mon modèle, qui sont dynamiques, le modèle renvoie le nom de l'icône à l'application ionic 2.

C'est la réponse que j'obtiens de mon 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"
        }
      ]
    }
  }

C'est ce que j'ai dans l'application Ionic2 pour le moment.

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

Merci d'avance.

3
Wesley Coetzee 25 janv. 2017 à 08:10

4 réponses

Meilleure réponse

Ce qui se passe ici, c'est que lorsque vous utilisez name="att.icon", vous ne faites que passer le mot clair att.icon à votre name attribut , mais dans ce cas att est un objet et icon est une clé de ce object.

Cela dit, vous souhaitez utiliser une liaison de propriété comme [name] au lieu de name:

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

Le compilateur évaluera maintenant la valeur de l'expression et attribuera la valeur au name.

Consultez la démo:

PLUNKER


Autres questions:

12
developer033 23 juil. 2017 à 14:40

Lorsque les données proviennent de ngFor, j'ai dû utiliser ceci auparavant:

[attr.name] = "ngForItem.name"

(en utilisant votre code):

<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>
0
HazeyAce 30 mai 2019 à 15:02

Une autre manière que j'utilise est:

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

La même chose fonctionne pour la balise src de img également

<img src={{att.image}}/>
2
Sagar Kulkarni 25 janv. 2017 à 15:16

Vous pouvez l'utiliser comme <ion-icon name="{{att.icon}}"></ion-icon>.

0
NightOwl888 23 avril 2018 à 08:24