*ngFor pour les objets : comment obtenir les clés et les valeurs sans perte de performance

Un problème que chaque développeur Angular connaît

Avez-vous déjà essayé d'afficher dans un template Angular le contenu d'un objet JavaScript classique avec *ngFor et soudain réalisé : "Mais comment récupérer à la fois la clé et la valeur ?" En effet, *ngFor fonctionne par défaut uniquement avec les tableaux. Or, un objet n'est pas un tableau.

Cette question est l'une des plus populaires sur Stack Overflow (des milliers de vues et des dizaines de réponses). Les développeurs ne cherchent pas seulement une solution, mais la bonne solution – celle qui ne ruinera pas les performances de l'application, surtout lorsque l'objet est volumineux ou fréquemment mis à jour.

Dans cet article, nous ne nous contenterons pas de donner une réponse. Nous allons passer en revue toutes les approches principales, des plus simples aux plus avancées, et montrer comment écrire un code rapide et stable. C'est parti !

Pourquoi *ngFor ne fonctionne-t-il pas avec les objets "prêts à l'emploi" ?

La directive *ngFor dans Angular est conçue pour les structures itérables (Iterable). Un tableau est une structure itérable. Un objet ne l'est pas. Lorsque vous écrivez :

<div *ngFor="let item of myObject">{{ item }}</div>

Angular générera une erreur : "Cannot find a differ supporting object '...'". Angular ne sait tout simplement pas comment parcourir un objet.

Mais en pratique, nous avons souvent besoin d'afficher des données provenant d'un objet : configurations, dictionnaires, réponses d'API où les clés ont un sens (par exemple, { name: 'Anna', age: 25, city: 'Paris' }).

La méthode la plus simple : Object.keys() et Object.entries()

La réponse la plus populaire et évidente sur Stack Overflow est de convertir l'objet en tableau directement dans le template ou dans le composant.

Option 1 : Object.keys() – obtenir uniquement les clés

// Dans le composant (TypeScript)\nexport class MyComponent {\n  myObject = { name: 'Anna', age: 25, city: 'Paris' };\n}

<!-- Dans le template -->\n<div *ngFor="let key of objectKeys(myObject)">\n  Clé : {{ key }}, Valeur : {{ myObject[key] }}\n</div>

Mais il y a un détail : objectKeys doit être accessible dans le template. Soit vous en faites une méthode du composant, soit vous la placez dans une propriété séparée :

// Composant\nexport class MyComponent {\n  myObject = { name: 'Anna', age: 25, city: 'Paris' };\n  objectKeys = Object.keys; // simple référence à la fonction native\n}

Cela fonctionne, mais appelle la fonction à chaque vérification de changement (change detection). Si l'objet est volumineux, cela impacte les performances.

Option 2 : Object.entries() – clés et valeurs en une fois

// Composant\nexport class MyComponent {\n  myObject = { name: 'Anna', age: 25, city: 'Paris' };\n  get entries() {\n    return Object.entries(this.myObject);\n  }\n}

<!-- Template -->\n<div *ngFor="let entry of entries">\n  Clé : {{ entry[0] }}, Valeur : {{ entry[1] }}\n</div>

Ou avec la déstructuration (plus lisible) :

<div *ngFor="let [key, value] of entries">\n  Clé : {{ key }}, Valeur : {{ value }}\n</div>

Avantages : simple, clair, évident.
\nInconvénients : la méthode entries sera appelée à chaque cycle de détection de changements. Pour les objets statiques, c'est acceptable ; pour les objets dynamiques, cela peut devenir problématique.

Performances : pourquoi est-ce important ?

Imaginez que votre objet contienne 10 000 entrées. Ou qu'il soit mis à jour toutes les 100 ms (par exemple, des données en temps réel depuis un serveur). Chaque appel à Object.entries() crée un nouveau tableau. Angular, à chaque cycle de détection de changements, verra un tableau "nouveau" et réaffichera toute la liste. Cela entraîne des saccades dans l'interface, une perte de focus sur les champs de saisie et des ralentissements.

C'est pourquoi, pour les projets sérieux, il est nécessaire d'utiliser une optimisation.