Объявление переменной подсчета в шаблоне 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

Update: Насколько я понимаю, все, что вам придется сделать, это

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

Труба должна просто отфильтруйте числа одинаковые путь, не имеет значения, находится ли он внутри вложенного или что-то еще.

Update 2: Я создал Plunkr, чтобы сделать это: https://plnkr.co/edit/NwoDPZqukKM7RyCHJudu?p=preview Кажется, что нет никакого другого способа, чем иметь пользовательскую функцию, которая подсчитывает строки до сих пор. Угловой не поддерживает пользовательский прирост на счетчике. Думаю, это связано с тем, что в шаблонах должна быть минимальная логика.