如何在应用管道后查找ngFor中的项目计数
如何在应用管道后查找ngFor中的项目计数
提问于 2016-03-18 07:45:54
我让一个ngFor在一个同时经过过滤和分页的表中创建行。
<tr *ngFor="#d of data.results | filter:filterText | pagination:resultsPerPage:currentPage">页面上还有另一个元素，用于显示所显示的记录数。这些元素最初被绑定到data.Results的长度。
如何获取应用过滤器管道后显示的数据的长度，以便正确显示。ngFor中提供的所有局部变量似乎都无法解决这一问题。
回答 6
Stack Overflow用户
回答已采纳
发布于 2016-03-18 14:31:00
您可以通过转换管道中的数组来获得项的计数。
其想法是，管道将数组转换为另一个数组，其中每个元素都有一个item属性和一个代表过滤(或原始)数组的parent属性：
@Pipe({ name: 'withParent', pure: false })
export class WithParentPipe implements PipeTransform {
transform(value: Array<any>, args: any[] = null): any {
return value.map(t=> {
return {
item: t,
parent: value
}
});
}
} 下面是它的用法：
<tr *ngFor="#d of data.results |
filter:filterText |
pagination:resultsPerPage:currentPage |
withParent">
Count: {{d.parent.length }}
Item: {{ d.item.name}}
</tr>Stack Overflow用户
发布于 2016-03-18 13:16:34
一种方法是在@ViewChildren()中使用模板变量
<tr #myVar *ngFor="let d of data.results | filter:filterText | pagination:resultsPerPage:currentPage">@ViewChildren('myVar') createdItems;
ngAfterViewInit() {
console.log(this.createdItems.toArray().length);
}Stack Overflow用户
发布于 2016-05-16 05:42:29
这不完全是原始问题的目的，但我也在寻找一种方法，一旦应用了所有管道，就可以显示项目的计数。通过组合索引和ngFor提供的最后一个值，我找到了另一个解决方案：
<div *ngFor="#item of (items | filter); #i = index; #last = last">
...
<div id="counter_id" *ngIf="last">{{index + 1}} results</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36073671
复制相关文章
相似问题