En mi aplicación angular, estoy tratando de crear una lista de valores separados por comas que obtuve de mi respuesta API.
La respuesta de la API se ve así:
{
"release_date":"2012-03-14",
"some_relation":[
{
"id":"2604ebbf-4eb5-46e3-89d8-ab4e8ecc8275",
"name":"ABC"
},
{
"id":"5267a0c6-9423-4e28-a413-133cc3435612",
"name":"DEF"
},
{
"id":"13d1454a-fc0e-457c-9f8e-9a9952984d8c",
"name":"GHI"
}
],
}
some_relation anidado, así que creé una interfaz para que esta lógica funcione:
export interface SomeResponse {
some_relation: some[];
}
export interface some {
id: string;
name: string;
}
En mi plantilla html, ahora hago esto:
<div *ngFor="let some of some_response.some_relation">
<small>{{ some.name }}</small>
</div>
Lo que devuelve la siguiente salida:
A B C
DEF
GHI
En lugar de generar varias líneas, me gustaría tenerlo de esa manera:
ABC, DEF, GHI
¿Cómo se puede lograr esto?
Gracias por adelantado.
Puedes hacerlo así:
div por span para que no coloque cada elemento en una nueva línea, solo si no es el último elemento <span *ngFor="let item of some_response.some_relation; let last = last">
<small>{{ item.name }}</small><span *ngIf="!last">, </span>
</span>
Eso es porque está usando *ngFor en la etiqueta de división en lugar de una etiqueta pequeña y está creando 3 divisiones con una etiqueta pequeña en cada división. La división es un elemento de bloque y cada división se representa en la siguiente línea. Intente hacer algo como esto para la representación de una sola línea:
<small *ngFor="let some of some_response.some_relation" >
{{ some.name }}
</small>
Editar: como desea la coma en el medio, puede usar esto:
<small>
{{ some_response.some_relation.netuce((total, obj, index) => index? total + ", " + obj.name: obj.name, "") }}
</small>