0

Tengo un array de elementos donde solo quiero traer el primero (sale_price), pero en ngFor trae todos los sale_price.

Código Angular:

<*ngFor="let valor of equipo.equipment_details;">{{valor.sale_price}}</>

Objeto:

"equipment_details": [
    {
        "id": 7,
        "sale_price": "0",
        "customer_price": "None",
        "group_plans": [],
        "created": "2017-10-23T21:07:12.933975Z",
        "modified": "2017-11-16T14:49:46.839778Z",
        "memory": null,
        "is_active": false,
        "start": "2017-11-16T21:57:14.299810Z",
        "equipment": 28,
        "promotion": null
    },
    {
        "id": 6,
        "sale_price": "0",
        "customer_price": "None",
        "group_plans": [],
        "created": "2017-10-23T21:07:12.933417Z",
        "modified": "2017-11-16T14:49:46.875055Z",
        "memory": null,
        "is_active": false,
        "start": "2017-11-16T21:57:14.299810Z",
        "equipment": 28,
        "promotion": null
    },
    {
        "id": 8,
        "sale_price": "0",
        "customer_price": "None",
        "group_plans": [],
        "created": "2017-10-23T21:07:12.934477Z",
        "modified": "2017-11-16T14:49:46.740048Z",
        "memory": null,
        "is_active": false,
        "start": "2017-11-16T21:57:14.299810Z",
        "equipment": 28,
        "promotion": null
    }
]

3 respuestas 3

2

Obtener el primer elemento del Array con *ngFor no es posible, ya que el mismo es una directiva para iterar sobre un Array de elementos y generar una plantilla idéntica para cada elemento con los valores correspondiente.

Explicación

Lo que si se puede hacer es agregar ciertas validaciones que te permiten saber si es el primer elemento y tomar una acción que podrían ser mostrarla, no mostrarla o darle un tratamiento especial a su visualización. *ngFor cuenta con ciertas variables como las siguientes:

  • index: number: El índice del elemento actual en el iterable.
  • first: boolean: Verdadero cuando el artículo es el primer elemento en el iterable.
  • last: boolean: Verdadero cuando el elemento es el último elemento en el iterable.
  • even: boolean: Verdadero cuando el elemento tiene un índice par en el iterable.
  • odd: boolean: Verdadero cuando el elemento tiene un índice impar en el iterable.

Ejemplo:

Utilizando first y *ngIf podríamos permitir mostrar únicamente el primer elemento de la siguiente forma:

<div *ngFor="let valor of equipo.equipment_details; first as isFirst">
     <span *ngIf="isFirst">{{valor.sale_price}}</span>
</div>

Conclusión

Si tu intención es siempre visualizar únicamente el primer elemento, te recomiendo utilizar una función que tome solo ese elemento de la lista y lo retorne para utilizarlo, lo cual seria más performante. La forma anterior que te mostré es recomendable para cuando se le desea dar un tratamiento especial a ese item o se desea mostrar algun elemento adicional junto a dicho item.

0

Si lo que intentas es de tu array de 3 elementos en tu ejemplo traer solo el primer elemento y seguir teniendo un array para recorrerlo con la directiva NgForOf de Angular puedes hacer lo siguiente:

equipo.equipment_details.splice(0, 1)

Por lo contrario, si lo que intentas es recorrer tu array pero siempre obtener el sale_price del primer elemento, mi recomendación es usar una variable calculado que te devuelva ese valor en vez de usar valor.sale_price usar esa variable, ejemplo:

get firstSalePrice() {
  return this.equipo.equipment_details[0].sale_price || 0;
}
0

Puedes hacer esto:

<p *ngFor="let item of exampleObject; let i=index;" >
  <span *ngIf="i === 0">{{item.id}} - {{i}}</span>
</p>
1
  • Hola, esta respuesta ha sido reportada como de baja calidad por la comunidad. Las publicaciones que son básicamente solo texto se consideran de baja calidad porque no suelen ser de gran ayuda para los demás usuarios. Deberías editarla para añadir algo más de información: ¿en qué consiste el cambio que sugieres? ¿cómo soluciona el problema expuesto en la pregunta? Lee Cómo responder para más información.
    – Alvaro Montoro
    Commented el 3 sept. 2018 a las 20:00

Tu Respuesta

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