1

Tengo unos datos que tienen la siguiente estructura.

(users)
    [
    {
        "id": --,
        "Name": "--",
        "Email": "--",
        "Password": "--",       
        "group": {
            "id": 1,
            "name": "--",
        },
        "school": {
            "id": 1,
            "name": "--",
        }
      }
    ]

Estoy intentando mostrarlos en una tabla usando ngfor

                            <tr *ngFor="let users of listUsers">
                            <td><div >{{ users.id}}</div></td>
                            <td><div >{{ users.Name }}</div></td>                 
                            <td><div >{{ users.Email }}</div></td>
                            <td><div >{{ users.Password }}</div></td>
                            <td *ngFor="let group of users.group"><div> 
                            {{group.name}}</div></td>
                            <td><i  class="fas fa-edit text-primary"></i></td>
                          </tr>

A pesar de que he visto en otras preguntas que esta es la forma correcta no funciona. He intentado de diferentes soluciones y recibo el error en la consola del navegador:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Adjunto los archivos ts y el modelo que uso.

.ts file:

import { users } from '../../models/users';

listUsers: users[] = [];
ngOnInit(): void { this.getUsers()}

getUsers(){
    this.usersService.getUsers().subscribe(data => {
      console.log(data);
      this.listUsers= data;
    }, error=>{
      console.log(error);
    })
  }

models file:

export class users{
id: number;
Name: string;
Email: string;
Password: string;
group: any;
school: any;

constructor(Name: string,
    Email: string, Password: string , group: any , school: any){
    this.Name=Name;
    this.Email=Email;
    this.Password=Password;
    this.group= group;
    this.school=school;
}  

}

Esto es lo que busco mostrar en la tabla y me da error en el group y school.

  • id (se muestra correctamente)
  • Name (se muestra correctamente)
  • Email (se muestra correctamente)
  • Password (se muestra correctamente)
  • group name error (queda vacio el campo)
  • school name error (queda vacio el campo)

En la tabla con la respuesta, me muestra todo el objeto group, es decir:

id | Name | Email | Password | group | school
--    --     --      --        id : 1 name: -- createdAt: -- updateAt:-- 

Solo necesito que en el campo muestre el nombre del grupo. Se puede con esta forma de iterar seleccionar solo eso o ya depende de la informacion que envía el backend?

2
  • Pusiste usuario.id en lugar de user.id
    – Legna
    Commented el 21 ene. 2022 a las 21:54
  • Gracias! fue error al momento de escribir la pregunta. En la app esta bien. Los otros datos de la tabla se muestran bien. El problema es que al llegar al objeto group no me muestra nada y manda el error, dejando esos campos vacios.
    – Mat
    Commented el 21 ene. 2022 a las 21:57

1 respuesta 1

1

No puedes iterar sobre un objeto. Tienes que hacer algo así en la parte del group.

<table>
  <tr *ngFor="let users of listUsers">
    <td>
      <div>{{ users.id }}</div>
    </td>
    <td>
      <div>{{ users.Name }}</div>
    </td>
    <td>
      <div>{{ users.Email }}</div>
    </td>
    <td>
      <div>{{ users.Password }}</div>
    </td>
    <td *ngFor="let kv of users.group | keyvalue">
      <div>
        {{kv.key}}: {{ kv.value  }}
      </div>
    </td>
    <td><i class="fas fa-edit text-primary"></i></td>
  </tr>
</table>

Ejemplo funcional

Edición

Puedes entrar directamente a la propiedad del objeto:

<table>
  <tr *ngFor="let users of listUsers">
    <td>
      <div>{{ users.id }}</div>
    </td>
    <td>
      <div>{{ users.Name }}</div>
    </td>
    <td>
      <div>{{ users.Email }}</div>
    </td>
    <td>
      <div>{{ users.Password }}</div>
    </td>
    <td>
        {{ users.group.name  }}
    </td>
    <td><i class="fas fa-edit text-primary"></i></td>
  </tr>
</table>

Ejemplo funcional

5
  • Gracias!! funciona, al menos ahora envia todo el objeto. Puedo de alguna forma solo mostrar el group name?. Por ahora voy a intentar ajustar eso desde el backend para que no me envie todo
    – Mat
    Commented el 21 ene. 2022 a las 22:38
  • No te entiendo. Puedes poner un ejemplo del resultado que quieres editando tu pregunta?
    – Legna
    Commented el 21 ene. 2022 a las 22:39
  • Claro! esta editada. Solo quiero saber si es posible, si no, no hay problema mi duda principal ya esta resuelta. Gracias!!
    – Mat
    Commented el 21 ene. 2022 a las 22:50
  • @Mat Si es posible!, actualize mi respuesta.
    – Legna
    Commented el 22 ene. 2022 a las 0:19
  • @Mat recuerda marcar la respuesta como aceptada mediante un click en el check verde :D
    – fredyfx
    Commented el 22 ene. 2022 a las 0:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.