在angular2模板ngFor中声明计数变量

发布时间：2020-12-17 17:02:34 所属栏目：安全来源：网络整理

导读：假设我有一个数据数组如下. datas : [ { nums : [121,222,124,422,521,6312,7141,812] },{ nums : [121,812] }]nums = [121,812] 我想在序列号之后显示数组中的偶数,如下所示. 1. 2222. 1243. 4224. 63125. 8126. 2227. 1248. 4229. 631210. 81211. 22212. 1

假设我有一个数据数组如下.

datas : [
  {
    nums : [121,222,124,422,521,6312,7141,812]
  },{
    nums : [121,812]
  }
]
nums = [121,812]

我想在序列号之后显示数组中的偶数,如下所示.

但我无法想出在“偶数”检查后设置索引的方法.
目前,我使用以下代码显示文本.

<div *ngFor="let data of datas">
  <div *ngFor="let num of data.nums; let rowIndex = index">
    <div *ngIf="num % 2 == 0">
      {{rowIndex+1}}. {{num}}
    </div>
  </div>
</div>

但它显示出来

有没有办法设置一个计数器,每次验证ngIf条件时递增计数器,以便我可以显示正确的索引.

解决方法

您应该使用管道来过滤* ngFor.
见 https://angular.io/docs/ts/latest/guide/pipes.html(“飞行英雄管”),这是一个很好的例子.

<div *ngFor="let num of (nums | evenNums); let rowIndex=index">
  {{rowIndex+1}}. {{num}}
</div>

和

import { Pipe,PipeTransform } from '@angular/core';

@Pipe({ name: 'evenNums' })
export class EvenNumsPipe implements PipeTransform {
  transform(allNums: number[]) {
    return allNums.filter(num => num % 2 == 0);
  }
}

也比较How to apply filters to *ngFor

更新：
据我所知,你所要做的就是

<div *ngFor="let data of datas">
  <div *ngFor="let num of (data.nums | evenNums); let rowIndex = index">
      {{rowIndex+1}}. {{num}}
  </div>
</div>

管道应该以相同的方式过滤nums,如果它在嵌套for或其他内容中无关紧要.

更新2：
我创建了一个Plunkr来执行此操作：https://plnkr.co/edit/NwoDPZqukKM7RyCHJudu?p=preview似乎除了拥有一个到目前为止对行进行计数的自定义函数之外别无他法. Angular不支持在计数器上具有自定义增量.我想这是由于指南在模板中应该尽可能少的逻辑.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!