在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不支持在計數器上具有自定義增量。 我想這是由於指南在模板中應該盡可能少的邏輯。