如何在 *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中，我尝试每次显示对应相同的数据'order'。我收到的信息如下

[
  {
    "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 ，但它只是 returns 对应于最后一个对象的值... 有人让我看到我做错了什么。提前谢谢你。

Answer 1

您在 *ngFor 循环中获取索引，如下所示：

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

然后，只要在需要索引的地方使用i即可。

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

How to display the index data in a *ngFor?

html

angular-ng-if

ngfor

angular7