在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（「飛行英雄管」），這是一個很好的例子。

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