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!!
Puedes ingresar directamente a los datos con la notación de puntos sin necesidad del pipe:
<table>
<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 >
<div>{{ item.User.Name}}</div>
</td>
<td >
{{ item.User.Group.NGroup }}
</td>
<td >
{{item.Sport.NSport}}
</td>
</tr>
</tbody>
</table>
Te dará el siguiente resultado:
33 7 2022-01-31 Cristian Group 1 Sport 1
Te dejo un ejemplo funcional aquí.