如何在应用管道后查找ngFor中的项目数

Question

我有一个ngFor在表中创建行,过滤和分页.

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

页面上还有另一个元素显示显示的记录数.这些元素最初绑定到data.Results的长度.

如何获取应用过滤器管道后显示的数据长度,以便我可以正确显示它.ngFor中提供的局部变量都没有考虑到这一点.

Answer 1

一种方法是使用模板变量 @ViewChildren()

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

@ViewChildren('myVar') createdItems;

ngAfterViewInit() {
  console.log(this.createdItems.toArray().length);
}

Answer 2

这不是原始问题的目的,但我也在寻找一种方法来显示所有管道应用后的项目数.通过组合ngFor提供的索引和最后一个值,我找到了另一个解决方案:

<div *ngFor="#item of (items | filter); #i = index; #last = last">
...
  <div id="counter_id" *ngIf="last">{{index + 1}} results</div>
</div>

Answer 3

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

我们的想法是管道将数组转换为另一个数组,其中每个元素都有一个item属性,以及一个表示过滤(或原始)数组的父属性:

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

Answer 4

我发现最简单的解决方案如下：

1. 在您的组件中：添加一个将保存当前计数的字段

  filterMetadata = { count: 0 };

2. 在模板中：将filterMetadata作为参数添加到过滤器管道中

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

3. 将filterMetadata.count插值到显示显示的记录数的元素中。

  <span> {{filterMetadata.count}} records displayed</span>

4. 完成过滤后，在过滤器管道中更新filterMetadata.count字段

  transform(items, ..., filterMetadata) {
    // filtering
    let filteredItems = filter(items);

    filterMetadata.count = filteredItems.length;
    return filteredItems;
  }

该解决方案仍然使用纯管道，因此不会降低性能。如果您有多个进行过滤的管道，则应该将filterMetadata作为参数添加到所有管道中，因为一旦管道返回空数组，angular就会停止调用管道序列，因此您不能仅将其添加到第一个管道中或最后一个过滤管。

Answer 5

我遇到了同样的问题,虽然@bixelbits的答案得到了批准,但我觉得它并不理想,特别是对于大数据.

我认为最好避免Pipes这个问题,至少在当前的Angular 2实现(rc4)中,不要在每个元素中返回原始数组.

更好的解决方案是使用普通组件的功能来过滤数据,如下所示:

// mycomponent.component.ts  
filter() {
  let arr = this.data.filter(
      // just an example
      item => item.toLowerCase().includes(
        // term is a local variable I get it's from <input> 
        this.term.toLowerCase()
      )
    );
  this.filteredLength = arr.length;
  return arr;
}

然后,在模板中:

<ul>
  <li *ngFor="let el of filter()"> 
    {{ el | json }}
  </li>
</ul>
// mycomponent.component.html
<p > There are {{ filteredLength }} element(s) in this page</p>

除非你真的想使用Pipes,否则我会建议你在上面的例子中避免使用它们.