title: How to display the index data in a *ngFor?
body: <p>I have the following html in my angular application</p>
  
  <pre><code>                &lt;div class='order-list'&gt;
                      &lt;div *ngFor="let order of orders"&gt;
                          &lt;div class="row ciev-row header-row d-none d-lg-flex bg-white" [ngClass]="{'last': i === orders.length - 1}" (click)="toggle(order)"&gt;
                          &lt;div class="col-sm-3 my-auto"&gt;{{order.date}}&lt;/div&gt;
                          &lt;div class="col-sm-3 my-auto"&gt;Livrée&lt;/div&gt;
                          &lt;div class="col-sm-3 my-auto"&gt;{{order.order_number}}&lt;/div&gt;
                          &lt;div class="col-sm-2 my-auto"&gt;&lt;span class='price' [innerHTML]='order.overallAmount | currencyFormat'&gt;&lt;/span&gt;&lt;/div&gt;
                          &lt;div class="col-sm-1 my-auto p-0"&gt;
                              &lt;i class="fas fa-plus toggle-icon" *ngIf="toggled !== order.functional_id"&gt;&lt;/i&gt;
                              &lt;i class="fas fa-minus toggle-icon" *ngIf="toggled === order.functional_id"&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div class='row slider' [ngClass]="{'expanded': toggled === order.functional_id}"&gt;
                              &lt;div class='row ciev-row last extra-data'&gt;
                                  &lt;div class='col-sm-3 my-auto'&gt;Produits&lt;/div&gt;
                                  &lt;div class='col-sm-3 my-auto'&gt;Prix HT&lt;/div&gt;
                                  &lt;div class='col-sm-3 my-auto'&gt;Quantités&lt;/div&gt;
                                  &lt;div class='col-sm-3 my-auto'&gt;Total HT&lt;/div&gt; 
                              &lt;/div&gt;
                              &lt;div *ngFor="let order of orders; let i = index;"&gt;
                                  &lt;div *ngIf=''&gt;
                                      &lt;div class='col-sm-3 my-auto'&gt;{{order.overallAmount}}&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  </code></pre>
  
  <p>In my last *ngFor I try to show each time the data corresponding to the same 'order'.
  The information I receive is as follows</p>
  
  <pre><code>[
    {
      "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. &lt;br /&gt; 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
    }
  ]
  
  </code></pre>
  
  <p>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.</p>