Bonjour à tous,

J'ai un problème avec une barre de recherche qui trouve les éléments de mon backend mais qui n'arrive pas à les afficher. 

// search the user
this.searchField = new FormControl();
this.results = this.searchField.valueChanges.pipe(
switchMap(valueSearch =>
this.searchservice.UserByNameOrPseudo(valueSearch)
)
);

Voila ma méthode qui envois directement la recherche et qui stock mes objets dans results. 

<li class="row list-group-item py-1 mx-0" *ngFor="let user of results | async">

Et voila la boucle qui me l'affiche (pas dans son intégralité bien sûre mais l'idée est la!). Lorsque je lance une recherche ma console me signale toujours l'erreur suivante : 

NavBarComponent.html:40 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Aussi, il me surligne la ligne (<li>) que vous voyez juste en haut. 

Evidement j'ai essayé certaines méthodes de json pour le castrer mais je pense que j'ai raté un détail! 

-
Edité par ets_raphael 15 avril 2019 à 23:41:12

Bonjour,

Tu ne peux faire un ngFor que sur quelque chose d'itérable. Apparemment, ta variable result est un objet non itérable. Tu trouveras plus d'infos ici : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration

Le plus simple est de transformer ton objet en tableau à l'aide de Object.keys() ou Object.values(). Si tu veux absolument garder ton objet, il faut lui rajouter une méthode d'itération (cf la doc).

Merci mais j'ai pu trouver une solution simple, pour les personnes qui cherchent il faut castrer depuis le Ngfor. En attendant mes attribut on changer mais la logique est la.

Ce qui revient à : 

*ngFor="let profile of (results$ | async)?.results"

Merci encore et bon courage au personne qui seront dans la même situation que moi :)