在管道转换后获取 ngFor 中的数组长度答案

【问题标题】：Get length of array in ngFor after pipes transformation在管道转换后获取 ngFor 中的数组长度
【发布时间】：2017-11-15 05:13:23
【问题描述】：

我有以下模板：

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

不幸的是，ngFor 中不存在长度。如何解决此问题以在我的 ngFor 中提供可用的长度？

【问题讨论】：

【解决方案1】：

另一种解决方案可能如下

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

另见

【讨论】：

【解决方案2】：

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

【讨论】：

自 Angular 2 最终版本发布以来，我一直期待它能够正常工作，并且很早就添加了答案：D here，+1 链接
如何获取 ngFor 之外的长度？
@Luckylooke {{(myArray | customPipe)?.length}}
感谢@GünterZöchbauer，但我想知道无需多次执行管道的解决方案。比如：<div *ngFor="let item of myArray | heavySearchExecution as result"> Here is the length of my ngFor : {{result.length}} </div> <div *ngIf="!result.length"> No results, please do something else... </div>
在代码中进行过滤并将结果数组分配给一个字段，并在绑定中使用该字段。

【解决方案3】：

嗯，这在 Angular 文档中没有很好的记录，你可以在 Angular 的源代码下找到 -

*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>

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

这听起来可能很脏（确实如此）

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

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

优点

缺点

【讨论】：