如何在 *ngFor 中显示索引数据?
[英] How to display the index data in a *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 *ngFor="let order of orders; let i = index;"><div *ngIf=''><div class='col-sm-3 my-auto'>{{order.overallAmount}}</div>
在我最后的 *ngFor 中，我每次都尝试显示对应于相同订单"的数据.我收到的信息如下
<预><代码>[{"functional_id": "201907161056510012400000SD4AYAA1",交易":[]，"日期": "16/07/2019","order_number": "105651",总金额":0},{"functional_id": "201907161058060012400000SD4AYAA1",交易":[]，"日期": "16/07/2019","order_number": "105806",总金额":0},{"function_id": "201910141655100012400000SD4AYAA1",交易":[]，"日期": "14/10/2019","order_number": "165510",总金额":0},{"functional_id": "201910141706140012400000SD4AYAA1",交易":[]，"日期": "14/10/2019","order_number": "170614",总金额":0},{"functional_id": "201910150931200012400000SD4AYAA1",交易":[]，"日期": "15/10/2019","order_number": "093120",总金额":0},{"functional_id": "201911051137220012400000SD4AYAA1",交易":[]，"日期": "05/11/2019","order_number": "113722",总金额":0},{"function_id": "201911291131250012400000SD4AYAA1",交易":[{数量":2，价格":140，物品": {"name": "Carton de 10 coffrets","description": "+ 2 次充值 d'argile offertes",产品": {"name": "Coffret empreinte rouge"}},数量":280},{数量":2，价格":17，物品": {"name": "1 个 lanterne d'accueil + 1 个 accroche porte",产品": {"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éssur les poignées des salles de Consultant au Calme."}},数量":34},{数量":1，价格":0，物品": {"name": "小模型","description": "标准杆 25",产品": {"name": "Sacs blancs","description": "Pour les crémations Plurielles"}},金额":0},{数量":1，价格":0，物品": {"name": "Moyen 模型","description": "20 杆",产品": {"name": "Sacs blancs","description": "Pour les crémations Plurielles"}},金额":0},{数量":1，价格":0，物品": {"name": "大模型","描述": "标准杆 10",产品": {"name": "Sacs blancs","description": "Pour les crémations Plurielles"}},金额":0},{数量":2，价格":0，物品": {产品": {"name": "Carnet de Conventions"}},金额":0}],"日期": "29/11/2019","order_number": "113125",总金额":314},{"functional_id": "201912300925190012400000SD4AYAA1",交易":[{数量":2，价格":140，物品": {"name": "Carton de 10 coffrets","description": "+ 2 次充值 d'argile offertes",产品": {"name": "Coffret empreinte rouge"}},数量":280}],"日期": "30/12/2019","order_number": "092519",总金额":280}]我试图在 *ngIf 中设置条件i === orders.length - 1 ，但它只返回与最后一个对象对应的值...有人让我看到我做错了什么.提前致谢.
解决方案
你在 *ngFor 循环中得到索引，像这样:
*ngFor="let elem of elements; let i = index"
然后，只要在需要索引的地方使用 i 即可.
I have the following html in my angular application
<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>
In my last *ngFor I try to show each time the data corresponding to the same 'order'.
The information I receive is as follows
[
{
"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
}
]
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.
解决方案
You get the index in your *ngFor loop, like this:
*ngFor="let elem of elements; let i = index"
Then, just use i wherever you need the index.
这篇关于如何在 *ngFor 中显示索引数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
