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

Question

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

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

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

1. 222
2. 124
3. 422
4. 6312
5. 812
6. 222
7. 124
8. 422
9. 6312
10. 812
11. 222
12. 124
13. 422
14. 6312
15. 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>

但它显示出来

2. 222
3. 124
4. 422
6. 6312
8. 812
2. 222
3. 124
4. 422
6. 6312
8. 812
2. 222
3. 124
4. 422
6. 6312
8. 812

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

Answer 1

您应该使用管道来过滤*ngFor 。 请参阅https://angular.io/docs/ts/latest/guide/pipes.html("Flying Heroes pipe“），它为此提供了一个很好的示例。

<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);
  }
}

还要比较如何将过滤器应用于* 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不支持在计数器上具有自定义增量。 我想这是由于指南在模板中应该尽可能少的逻辑。