EmberJS - Affichage des clés dans un objet

Vous pouvez afficher les clés dans l'objet à l'aide de l' assistant # each-in et il effectue une itération une fois pour chaque clé passée dans l'objet.

Syntaxe

<ul>
   {{#each-in array_name as |block-param| }}
      <li>{{block-param}}</li>
   {{/each}}
</ul>

Dans le code ci-dessus, le modèle itère nom_tableau , qui comprend les objets et chaque clé de l'objet spécifié comme paramètre bloc .

Exemple

L'exemple ci-dessous affiche les clés de l'objet en utilisant l' assistant # each-in . Pour afficher les éléments, créez un composant à l'aide de la commande suivante -

ember g component store-categories

Maintenant, ouvrez le store-categories.js créé sous app / component / avec le code suivant -

import Ember from 'ember';

export default Ember.Component.extend ({
   willRender() {
      this.set('typesOfvehicles', {
         'Cars': ['Ferrari', 'Audi', 'BMW'],
         'Motor bikes': ['Harley-Davidson', 'Yamaha','Honda']
      });
   }
});

Créez un modèle appelé store-categories.hbs sous app / templates / avec le code suivant -

<ul>
   {{#each-in typesOfvehicles as |category products|}}
      <li>{{category}}
         <ol>
            {{#each products as |product|}}
               <li>{{product}}</li>
            {{/each}}
         </ol>
      </li>
   {{/each-in}}
</ul>

Pour répertorier les clés de l'objet, utilisez le code suivant dans le fichier application.hbs créé sous app / templates / -

<p>This is Displaying the Keys in an Object:</p>
{{store-categories}}
{{outlet}}

Production

Exécutez le serveur de braises et vous recevrez la sortie suivante -