管道改造后获取ngFor中的数组长度

时间:2017-06-13 12:14:51

标签: angular angular2-pipe

我有以下模板:

<div *ngFor="let item of myArray | customPipe1 | customPipe2; let l = length">
  Here is the length of my ngFor : {{l}}
</div>

不幸的是,ngFor中不存在长度。我如何解决这个问题,以便在我的ngFor中提供长度?

5 个答案:

答案 0 :(得分:13)

另一种解决方案可能是以下

<div *ngFor="let item of myArray | customPipe1 | customPipe2; let l = count">
  Here is the length of my ngFor : {{l}}
</div>

<强> Plunker Example

另见

答案 1 :(得分:12)

<div *ngFor="let item of myArray | customPipe1 | customPipe2 as result">
  Here is the length of my ngFor : {{result.length}}
</div>

另见https://angular.io/api/common/NgForOf

答案 2 :(得分:0)

嗯,Angular doc中没有详细记录,你可以在Angular的源代码中找到 -

https://github.com/angular/angular/blob/master/packages/common/src/directives/ng_for_of.ts

* ngFor接受计数参数。

constructor(public $implicit: T, public ngForOf: NgIterable<T>, public index: number,public count: number) {
}

所以我们可以得到像 -

这样的计数
<div *ngFor="let item of items | pipe; let l = count">
<div>{{count}}</div>
</div>

答案 3 :(得分:0)

@Günter Zöchbauer {{(myArray | customPipe)?.length}} - 按预期工作

答案 4 :(得分:0)

这听起来可能很脏(确实如此)

但是 const count = document.getElementbyId('id-of-wrapper').childElementCount; 可以解决问题。

当事情发生变化时需要调用这个函数。

优点

  • 不需要重新计算管道
  • 作品
  • 循环外可用的计数

缺点

  • 脏(有点)
  • 角度不对
  • 对dom的依赖