应用管道后如何在ngFor中查找项目数 [英] How to find the count of items in an ngFor after the pipes have been applied

问题描述

我有一个ngFor函数，用于在经过过滤和分页的表中创建行.

I have an ngFor creating rows in a table that is both filtered and paged.

<tr *ngFor="#d of data.results | filter:filterText | pagination:resultsPerPage:currentPage">

页面上还有另一个元素，用于显示显示的记录数.这些元素最初绑定到数据.结果的长度.

There is another element on the page that displays the number of records displayed. These elements are initially bound to the data.Results' length.

如何获取应用过滤器管道后显示的数据长度，以便可以正确显示. ngFor中提供的所有局部变量似乎都无法解决这个问题.

How do I get the length of the data that is displayed after the filter pipe has been applied so that I can display it correctly. None of the provided local variables in ngFor seem to account for this.

推荐答案

您可以通过在管道中转换数组来获得项目数.

You can get the count of the items by transforming the array within a pipe.

这个想法是管道将数组转换成另一个数组，其中每个元素都具有item属性，并且父属性代表过滤后的(或原始的)数组:

The idea is that the pipe would transform the array into another array where each element has an item property, and a parent property representing the filtered (or original) array:

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

这篇关于应用管道后如何在ngFor中查找项目数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！