How to access specific elements in an array - angular template?

Question

currently i'm developing a webpage using angular - i have a class with 2 items as below:

Array(2)
 0: uiData { id: 12, price: 324 }
 1: uiData { id: 23, price: 432 }

i'm trying to access these data in angular template

<div *ngFor="let item of uiData">
    price: {{item.price}}
</div>

output:what i getting is as below

price: 324
price: 432

desired output i'm looking for is

price: 324/432

tried accessing the data by providing the index , like uiData[0].price/uiData[1].price but this isn't working.

is there a way to access these items?

The entire applications data points are zero, meaning displaying zeros. — Dayakar Kodirekka
– Dayakar Kodirekka, Commented Nov 4, 2021 at 8:53

jeremy-denis · Accepted Answer · 2021-11-04 07:28:47Z

1

you should be able to access these data by reopen another {{}}

<div>
    price: {{uiData[0].price}}/{{uiData[1].price}}
</div>

If you don't want to access directly the data at range 0 and 1 you can also loop on array like that

<div>
    price: 
    <span *ngFor="let item of uiData;last as isLast">
      {{item.price}}
      <ng-container *ngIf="!isLast">/</ng-container>
   </span
</div>

edited Nov 4, 2021 at 7:28

answered Nov 4, 2021 at 7:12

jeremy-denis

6,8963 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Giriteja Bille Over a year ago

you have a duplicate "

Dayakar Kodirekka Over a year ago

@jeremy-denis: Thanks for the solution , the second option looping through the array solved my problem. The first option is displaying zero's in the entire application.

Tomerikoo · Accepted Answer · 2021-11-04 10:56:29Z

0

You can write something like this:

<div> price: <span *ngFor="let item of uiData;index as i">
    {{item.price}}
        <span *ngIf="i!=(uiData?.length-1)">/
        </span>
    </span>
</div>

edited Nov 4, 2021 at 10:56

Tomerikoo

19.6k16 gold badges57 silver badges68 bronze badges

answered Nov 4, 2021 at 7:25

Giriteja Bille

1661 silver badge13 bronze badges

Collectives™ on Stack Overflow

How to access specific elements in an array - angular template?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related