假设我有一个数据数组如下.
datas : [
{
nums : [121,222,124,422,521,6312,7141,812]
},{
nums : [121,812]
}
]
nums = [121,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条件时递增计数器,以便我可以显示正确的索引.
解决方法
您应该使用管道来过滤* ngFor.
见 https://angular.io/docs/ts/latest/guide/pipes.html(“飞行英雄管”),这是一个很好的例子.
见 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不支持在计数器上具有自定义增量.我想这是由于指南在模板中应该尽可能少的逻辑.
