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]

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

但我无法找到一种在＆＃34;偶数＆＃34;之后设置索引的方法。校验。目前，我使用以下代码显示文本。

<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（“飞行英雄管”），它为此提供了一个很好的例子。

<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不支持在计数器上具有自定义增量。我想这是因为指南中模板中的逻辑应该尽可能少。

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

1 个答案: