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

本文介绍了如何在 *ngFor 中显示索引数据?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的 Angular 应用程序中有以下 html

 
<div *ngFor="让订单顺序"><div class="row ciev-row header-row d-none d-lg-flex bg-white" [ngClass]="{'last': i === orders.length - 1}"(点击)=切换(订单)"><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 |货币格式'></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 class='row slider' [ngClass]="{'expanded': toggled === order.functional_id}"><div class='row ciev-row last extra-data'><div class='col-sm-3 my-auto'>产品</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'>总 HT</div>

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

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