Estoy desarrollando una aplicación con angular y necesito mostrar unos datos que tienen la siguiente estructura:
{
"id": 33,
"arg": 7,
"date": "2022-01-31",
"User": {
"Name": "Cristian",
"Group": {
"NGroup": "Group 1"
}
},
"Sport": {
"NSport": "Sport 1"
}
},
La idea es mostrar la información de esta forma:
id | arg | date | Name (User) | NGroup (Group) | NSport (Sport)
Para esto estaba intentando utilizar keyvalue
, el problema de esto es que cuando trae el objeto User, me muestra un item
llamado [object Object]
que corresponde a group y no hay forma de ocultarlo o solo seleccionar que muestre solo nombre. Este es el código actual:
<tbody>
<tr *ngFor="let item of listItems">
<td><div>{{ item.id }}</div></td>
<td><div>{{ item.arg}}</div></td>
<td><div>{{ item.date }}</div></td>
<td *ngFor="let key of item.User | keyvalue "><div>{{ key.value }}</div></td>
<td *ngFor="let key of item.User | keyvalue"><div *ngFor="let key2 of key.value | keyvalue" >{{ key2.value }}</div></td>
<td *ngFor="let kv of item.Sports | keyvalue"><div>{{kv.value}}</div></td>
</tr>
</tbody>
La salida de esto es :
id | arg | date | [Object,Object] | Name(User) | NGroup (Group) | NSport(sport)
Claramente el keyvalue
está mostrando todo. Investigando me di cuenta que se pueden hacer pipes para mostrar la información de forma personalizada y la verdad no entiendo mucho como funciona, ese es el motivo de esta pregunta.
Gracias!!