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?

CodePudding user response：

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>

CodePudding user response：

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>