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

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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>

Method 2

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>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0