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

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

但在 "even" 检查后我想不出设置索引的方法。目前，我使用以下代码显示文本。

<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 条件被验证时它都会递增，以便我可以显示正确的索引。

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

也比较

更新： 据我了解，你所要做的就是

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

管道应该以相同的方式过滤 nums，不管它是否在嵌套的 for 内或其他什么。

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

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

Declaring a counting variable in angular2 template ngFor

angular-ng-if

ngfor

angular