Angularjs   发布时间:2022-04-20  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了在angular2模板ngFor中声明计数变量大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_607_4@ 假设我有一个数据数组如下.

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(“飞行英雄管”),这是一个很好的例子.

<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不支持在计数器上具有自定义增量.我想这是由于指南在模板中应该尽可能少的逻辑.

大佬总结

以上是大佬教程为你收集整理的在angular2模板ngFor中声明计数变量全部内容,希望文章能够帮你解决在angular2模板ngFor中声明计数变量所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。