0 votes

Get only the first element of an array with NgFor

I have an array of elements where I only want to fetch the first one ( sale_price ), but in ngFor brings all the sale_price .

Code Angular :

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

Object:

"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
    }
]

2voto

Federico Madoery Points 2654

Get the first element of the Array with *ngFor is not possible, since it is a directive to iterate over an array of elements and generate an identical template for each element with the corresponding values.

Explanation

What if it can be done is to add certain validations that allow you to know if it is the first element and take an action that could be to show it, not to show it or to give a special treatment to its visualization. *ngFor The following are some of the variables:

  • index: number: The index of the current element in the iterable.
  • first: boolean: True when the item is the first element in the iterable.
  • last: boolean: True when the element is the last element in the iterable.
  • even: boolean: True when the element has an even index in the iterable.
  • odd: boolean: True when the element has an odd index in the iterable.

Example:

Using first y *ngIf we could allow to show only the first element as follows:

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

Conclusion

If your intention is to always display only the first element I recommend you to use a function that takes only that element of the list and returns it to use it, which would be more performant. The previous form that I showed you is recommended for when you want to give a special treatment to that item or you want to show some additional element next to that item.

0voto

dddenis Points 2821

If what you are trying to do is from your 3-element array in your example to bring only the first element and still have an array to traverse with the directive NgForOf Angular you can do the following:

equipo.equipment_details.splice(0, 1)

On the contrary, if you are trying to traverse your array but always get the sale_price of the first element, my recommendation is to use a calculated variable that returns that value instead of using value.sale_price use that variable, example:

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

0voto

You can do this:

<p *ngFor="let item of exampleObject; let i=index;" >
  <span *ngIf="i === 0">{{item.id}} - {{i}}</span>
</p>

0 votes

Hi, this answer has been reported as low quality by the community. Posts that are basically just text are considered low quality because they are usually not very helpful to other users. You should edit it to add some more information: what is the change you are suggesting, how does it solve the problem stated in the question? Read How to Answer for more information.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X