2
votes

Angular 7 Impossible de trouver un autre objet de support '[objet objet]' de type 'objet'. NgFor ne prend en charge que la liaison aux Iterables tels que les tableaux

J'obtiens une erreur lors de la récupération des données de la base de données.

Impossible de trouver un autre objet de prise en charge '[objet objet]' de type 'objet'. NgFor ne prend en charge que la liaison aux Iterables tels que les tableaux.

J'ai essayé toutes les réponses restantes mais je n'obtiens pas la solution exacte.

mon service.ts

<tr *ngFor="let use of userService.users">
  <td>{{ use.fullName }}</td>
</tr>

mon composant.ts final:

  refreshUserList(){
    this.userService.getAllUsers().subscribe((res) => {
      this.userService.users = res as User[];
    })
  };

mon composant.html :

  users: User[];
  getAllUsers(){
    return this.http.get(environment.apiBaseUrl + '/users');
  }

javascript typescript angular angular7 angular-template

6 commentaires

Pouvez-vous s'il vous plaît console.log la réponse?

alors vous avez fait quelque chose de bizarre. votre réponse n'est pas du type de l'utilisateur []. Essayez d'ajouter un type de réponse dans la méthode getAllUsers () (User []). et dans http.get, ajoutez this.http.get (environment.apiBaseUrl + '/ users');

{status: true, docs: Array (5)} ceci est mon console.log de réponse @dileepkumarjami

essayez * ngFor = "laissez utiliser userService.users? .docs" lorsque vous référencez le mauvais objet dans le modèle d'après console.log.

Merci @ForestG ça marche.

L'affichage des données du service à l'intérieur du modèle n'est pas une bonne idée, il vaut mieux utiliser la méthode ou le champ du composant

3 Réponses :

4
votes

Alors, utilisez ce qui suit car vous pouvez voir que la réponse n'est pas un tableau mais que l'un de ses champs est un tableau. Donc, vous devez itérer sur le champ du tableau.

*ngFor="let use of userService.users?.docs"

0 commentaires

2
votes

Vous devez stocker vos utilisateurs dans un tableau local de User dans le composant, et utiliser * ngFor sur le users.docs component.ts :

<tr *ngFor="let user of users?.docs">
  <td>{{ user.fullName }}</td>
</tr>

component.html :

users: User[];

refreshUserList(){
    this.userService.getAllUsers().subscribe(res => {
      res !== null : this.docs = res.docs;
    })
};

0 commentaires

0
votes

D'une autre manière, vous pouvez vérifier que les données sont prêtes à être diffusées dans un fichier html de la manière suivante.

<div *ngIf="userService.users?.length > 0">
   <tr *ngFor="let use of userService.users">
       <td>{{ use.fullName }}</td>
    </tr>
</div>

0 commentaires