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

也比较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>

管道应该以同样的方式过滤数字，不管它是否在嵌套的 for 内或其他任何东西内。

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