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> 

パイプべきである限り、私は理解して を同じ数のフィルタリングそれはネストされたものの中にあるかどうかは関係ありません。

アップデート2： 私はこれを行うにPlunkrを作成しました：https://plnkr.co/edit/NwoDPZqukKM7RyCHJudu?p=preview を、これまでの行をカウントするカスタム機能を持つよりも他の方法がないように思えます。 Angularでは、カウンタのカスタムインクリメントをサポートしていません。私はこれが、テンプレートに可能な限り最小限のロジックがあるべきであるというガイドラインによるものだと思います。