如何在*ngFor中显示索引数据？

Question

在我的Angular应用程序中，我有以下html内容。

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

在我的最后一个*ngFor中，我试图每次都显示出相同 "订单 "所对应的数据。

[
  {
    "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
  }
]

我试着在*ngIf i === orders.length - 1中设置条件，但它只返回最后一个对象对应的值...。谁来让我看看我做错了什么.先谢谢你。

Answer 1

您可以在您的 *ngFor 循环，像这样。

*ngFor="let elem of elements; let i = index"

然后，就用 i 在你需要索引的地方。