I have the following html in my angular application
<div class='order-list'>
<div *ngFor="let order of orders">
<div class="row ciev-row header-row d-none d-lg-flex bg-white" [ngClass]="{'last': i === orders.length - 1}" (click)="toggle(order)">
<div class="col-sm-3 my-auto">{{order.date}}</div>
<div class="col-sm-3 my-auto">Livrée</div>
<div class="col-sm-3 my-auto">{{order.order_number}}</div>
<div class="col-sm-2 my-auto"><span class='price' [innerHTML]='order.overallAmount | currencyFormat'></span></div>
<div class="col-sm-1 my-auto p-0">
<i class="fas fa-plus toggle-icon" *ngIf="toggled !== order.functional_id"></i>
<i class="fas fa-minus toggle-icon" *ngIf="toggled === order.functional_id"></i>
</div>
<div class='row slider' [ngClass]="{'expanded': toggled === order.functional_id}">
<div class='row ciev-row last extra-data'>
<div class='col-sm-3 my-auto'>Produits</div>
<div class='col-sm-3 my-auto'>Prix HT</div>
<div class='col-sm-3 my-auto'>Quantités</div>
<div class='col-sm-3 my-auto'>Total HT</div>
</div>
<div *ngFor="let order of orders; let i = index;">
<div *ngIf=''>
<div class='col-sm-3 my-auto'>{{order.overallAmount}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
In my last *ngFor I try to show each time the data corresponding to the same 'order'. The information I receive is as follows
[
{
"functional_id": "201907161056510012400000SD4AYAA1",
"transactions": [],
"date": "16/07/2019",
"order_number": "105651",
"overallAmount": 0
},
{
"functional_id": "201907161058060012400000SD4AYAA1",
"transactions": [],
"date": "16/07/2019",
"order_number": "105806",
"overallAmount": 0
},
{
"functional_id": "201910141655100012400000SD4AYAA1",
"transactions": [],
"date": "14/10/2019",
"order_number": "165510",
"overallAmount": 0
},
{
"functional_id": "201910141706140012400000SD4AYAA1",
"transactions": [],
"date": "14/10/2019",
"order_number": "170614",
"overallAmount": 0
},
{
"functional_id": "201910150931200012400000SD4AYAA1",
"transactions": [],
"date": "15/10/2019",
"order_number": "093120",
"overallAmount": 0
},
{
"functional_id": "201911051137220012400000SD4AYAA1",
"transactions": [],
"date": "05/11/2019",
"order_number": "113722",
"overallAmount": 0
},
{
"functional_id": "201911291131250012400000SD4AYAA1",
"transactions": [
{
"quantity": 2,
"price": 140,
"item": {
"name": "Carton de 10 coffrets",
"description": "+ 2 recharges d'argile offertes",
"product": {
"name": "Coffret empreinte rouge"
}
},
"amount": 280
},
{
"quantity": 2,
"price": 17,
"item": {
"name": "1 lanterne d'accueil + 1 accroche porte",
"product": {
"name": "Lanterne d'accueil",
"description": "Lors d'une euthanasie, cette affichette verticale auto-éclairée par bougie LED, est disposée à l’accueil. Elle montre l’importance de ce moment pour votre clinique. <br /> Les accroches porte déposés sur les poignées des salles de consultation invitent au calme."
}
},
"amount": 34
},
{
"quantity": 1,
"price": 0,
"item": {
"name": "Petit modèle",
"description": "Par 25",
"product": {
"name": "Sacs blancs",
"description": "Pour les crémations Plurielles"
}
},
"amount": 0
},
{
"quantity": 1,
"price": 0,
"item": {
"name": "Moyen modèle",
"description": "Par 20",
"product": {
"name": "Sacs blancs",
"description": "Pour les crémations Plurielles"
}
},
"amount": 0
},
{
"quantity": 1,
"price": 0,
"item": {
"name": "Grand modèle",
"description": "Par 10",
"product": {
"name": "Sacs blancs",
"description": "Pour les crémations Plurielles"
}
},
"amount": 0
},
{
"quantity": 2,
"price": 0,
"item": {
"product": {
"name": "Carnet de conventions"
}
},
"amount": 0
}
],
"date": "29/11/2019",
"order_number": "113125",
"overallAmount": 314
},
{
"functional_id": "201912300925190012400000SD4AYAA1",
"transactions": [
{
"quantity": 2,
"price": 140,
"item": {
"name": "Carton de 10 coffrets",
"description": "+ 2 recharges d'argile offertes",
"product": {
"name": "Coffret empreinte rouge"
}
},
"amount": 280
}
],
"date": "30/12/2019",
"order_number": "092519",
"overallAmount": 280
}
]
I tried to set the condition in the *ngIf i === orders.length - 1 , but it only returns the value corresponding to the last object... Someone to make me see what I'm doing wrong. Thank you in advance.
You get the index in your *ngFor loop, like this:
*ngFor="let elem of elements; let i = index"
Then, just use i wherever you need the index.