Angulaire 2 Récupère les clés de localStorage et les affiche dans une liste

Question

J'essaie d'afficher les données localStorage dans une liste. J'ai essayé de le lier avec * ngFor Mais je ne semble pas le faire correctement.

Answer 1

Déclarez une variable de type tableau

users: any = []; 

puis

this.users = JSON.parse(localStorage.getItem('users')); 

Answer 2

ngFor ne fonctionnent sur la matrice pas des objets. Poussez vos données localstorage dans un tableau. Ensuite, utilisez ngFor.

Mise à jour

Il est préférable de ne pas utiliser ngFor parce que vous n'avez pas l'interface répétée. Je vous suggère d'aller comme ça

localData = { Key: User, Value: {"name":"Kevin","country":"Canada","about":"Test","image":""‌​}} 

En vous HTML

<ul> 
    <li>{{localData.key}}</li> 
    <li>{{localData.value.name}}</li> 
    <li>{{localData.value.country}}</li> 
    <li>{{localData.value.about}}</li> 
    <li>{{localData.value.image}}</li> 
</ul> 

J'espère que cela peut vous aider. Si vous avez toujours besoin de * ngFor commentaire d'utilisation ci-dessous. Je vais vous aider