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

Question

我的角度应用程序中有以下 html

\n\n

                <div class=\'order-list\'>\n                    <div *ngFor="let order of orders">\n                        <div class="row ciev-row header-row d-none d-lg-flex bg-white" [ngClass]="{\'last\': i === orders.length - 1}" (click)="toggle(order)">\n                        <div class="col-sm-3 my-auto">{{order.date}}</div>\n                        <div class="col-sm-3 my-auto">Livr\xc3\xa9e</div>\n                        <div class="col-sm-3 my-auto">{{order.order_number}}</div>\n                        <div class="col-sm-2 my-auto"><span class=\'price\' [innerHTML]=\'order.overallAmount | currencyFormat\'></span></div>\n                        <div class="col-sm-1 my-auto p-0">\n                            <i class="fas fa-plus toggle-icon" *ngIf="toggled !== order.functional_id"></i>\n                            <i class="fas fa-minus toggle-icon" *ngIf="toggled === order.functional_id"></i>\n                        </div>\n                        <div class=\'row slider\' [ngClass]="{\'expanded\': toggled === order.functional_id}">\n                            <div class=\'row ciev-row last extra-data\'>\n                                <div class=\'col-sm-3 my-auto\'>Produits</div>\n                                <div class=\'col-sm-3 my-auto\'>Prix HT</div>\n                                <div class=\'col-sm-3 my-auto\'>Quantit\xc3\xa9s</div>\n                                <div class=\'col-sm-3 my-auto\'>Total HT</div> \n                            </div>\n                            <div *ngFor="let order of orders; let i = index;">\n                                <div *ngIf=\'\'>\n                                    <div class=\'col-sm-3 my-auto\'>{{order.overallAmount}}</div>\n                                </div>\n                            </div>\n                        </div>\n                        </div>\n                    </div>\n                </div>\n\n\n

\n\n

在我的最后 *ngFor 中，我尝试每次显示对应于同一个“订单”的数据。\n我收到的信息如下

\n\n

[\n  {\n    "functional_id": "201907161056510012400000SD4AYAA1",\n    "transactions": [],\n    "date": "16/07/2019",\n    "order_number": "105651",\n    "overallAmount": 0\n  },\n  {\n    "functional_id": "201907161058060012400000SD4AYAA1",\n    "transactions": [],\n    "date": "16/07/2019",\n    "order_number": "105806",\n    "overallAmount": 0\n  },\n  {\n    "functional_id": "201910141655100012400000SD4AYAA1",\n    "transactions": [],\n    "date": "14/10/2019",\n    "order_number": "165510",\n    "overallAmount": 0\n  },\n  {\n    "functional_id": "201910141706140012400000SD4AYAA1",\n    "transactions": [],\n    "date": "14/10/2019",\n    "order_number": "170614",\n    "overallAmount": 0\n  },\n  {\n    "functional_id": "201910150931200012400000SD4AYAA1",\n    "transactions": [],\n    "date": "15/10/2019",\n    "order_number": "093120",\n    "overallAmount": 0\n  },\n  {\n    "functional_id": "201911051137220012400000SD4AYAA1",\n    "transactions": [],\n    "date": "05/11/2019",\n    "order_number": "113722",\n    "overallAmount": 0\n  },\n  {\n    "functional_id": "201911291131250012400000SD4AYAA1",\n    "transactions": [\n      {\n        "quantity": 2,\n        "price": 140,\n        "item": {\n          "name": "Carton de 10 coffrets",\n          "description": "+ 2 recharges d\'argile offertes",\n          "product": {\n            "name": "Coffret empreinte rouge"\n          }\n        },\n        "amount": 280\n      },\n      {\n        "quantity": 2,\n        "price": 17,\n        "item": {\n          "name": "1 lanterne d\'accueil + 1 accroche porte",\n          "product": {\n            "name": "Lanterne d\'accueil",\n            "description": "Lors d\'une euthanasie, cette affichette verticale auto-\xc3\xa9clair\xc3\xa9e par bougie LED, est dispos\xc3\xa9e \xc3\xa0 l\xe2\x80\x99accueil. Elle montre l\xe2\x80\x99importance de ce moment pour votre clinique. <br /> Les accroches porte d\xc3\xa9pos\xc3\xa9s sur les poign\xc3\xa9es des salles de consultation invitent au calme."\n          }\n        },\n        "amount": 34\n      },\n      {\n        "quantity": 1,\n        "price": 0,\n        "item": {\n          "name": "Petit mod\xc3\xa8le",\n          "description": "Par 25",\n          "product": {\n            "name": "Sacs blancs",\n            "description": "Pour les cr\xc3\xa9mations Plurielles"\n          }\n        },\n        "amount": 0\n      },\n      {\n        "quantity": 1,\n        "price": 0,\n        "item": {\n          "name": "Moyen mod\xc3\xa8le",\n          "description": "Par 20",\n          "product": {\n            "name": "Sacs blancs",\n            "description": "Pour les cr\xc3\xa9mations Plurielles"\n          }\n        },\n        "amount": 0\n      },\n      {\n        "quantity": 1,\n        "price": 0,\n        "item": {\n          "name": "Grand mod\xc3\xa8le",\n          "description": "Par 10",\n          "product": {\n            "name": "Sacs blancs",\n            "description": "Pour les cr\xc3\xa9mations Plurielles"\n          }\n        },\n        "amount": 0\n      },\n      {\n        "quantity": 2,\n        "price": 0,\n        "item": {\n          "product": {\n            "name": "Carnet de conventions"\n          }\n        },\n        "amount": 0\n      }\n    ],\n    "date": "29/11/2019",\n    "order_number": "113125",\n    "overallAmount": 314\n  },\n  {\n    "functional_id": "201912300925190012400000SD4AYAA1",\n    "transactions": [\n      {\n        "quantity": 2,\n        "price": 140,\n        "item": {\n          "name": "Carton de 10 coffrets",\n          "description": "+ 2 recharges d\'argile offertes",\n          "product": {\n            "name": "Coffret empreinte rouge"\n          }\n        },\n        "amount": 280\n      }\n    ],\n    "date": "30/12/2019",\n    "order_number": "092519",\n    "overallAmount": 280\n  }\n]\n\n

\n\n

我尝试在 *ngIf \ni === orders.length - 1 中设置条件，但它只返回与最后一个对象对应的值... \n有人让我看看我做错了什么。\预先感谢您。

\n

Answer 1

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

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

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