如何在angular2中获得过滤（管道）集的大小 [英] How to get the size of a filtered (piped) set in angular2

问题描述

 从'angular2 / core'导入{Pipe，PipeTransform} ; 
 $ b @Pipe（{
 name：'myFilter'
}）
 export class MyFilter实现PipeTransform {
 transform（customerData：Array< Object> ;, args：any []）{
 if（customerData == undefined）{
 return; 
} 
 var re = new RegExp（args [0]）; 
 return customerData.filter（（item）=> re.test（item.customerId））; 
 
 
 $ / code $ / pre 
 
 
在我的模板中使用它：
 < tr * ngFor =＃customerCallomerData | myFilter：searchTerm> 
 ... 
< / tr> 
  
现在我想查看管道返回的匹配数量。所以基本上是返回数组的大小。
 
 
在angular 1.x中，我们能够将返回的集合赋给模板中的变量，如下所示：
 < div ng-repeat =person in filtered =（data | filter：query）> 
< / div> 
  
但是，我们无法再在angular2中的模板中分配变量。
 
 
 
那么如何在不调用过滤器两次的情况下获得过滤集合的大小呢？ 
 
解决方案
 原始  
 
 AFAIK目前没有办法直接做到这一点。一个黑客可能会添加一个模板变量的内容，并使用 ViewChildren（...）查询来获得创建的项目和计数他们。
 < tr * ngFor =let singleCustomerData of customerData | myFilter：searchTerm＃someVar> 
 ... 
< / tr> 
< div> count：{{filteredItems？.length}}< / div> 
  
 
 
 
 
 
  @ViewChildren（' someVar'）filteredItems; 
  
另一种方法是将一个计数器变量的引用传递给管道，如 https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview  
 
 $ b 
  update（Angular> = 4.0.0） 
 $ b 由于 Angular 4   * ngFor 支持作为 
 < tr * ngFor =let singleCustomerData of customerData | myFilter：searchTerm as result> 
  
您可以在模板中使用（在 * ngFor 被添加到）像 
 
 
 < div> {{result？.length}}< DIV> 
  
 
I wrote my own filter pipe as it disappeared in angular2:
import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({
  name: 'myFilter'
})
export class MyFilter implements PipeTransform {
  transform(customerData: Array<Object>, args: any[]) {
    if (customerData == undefined) {
      return;
    }
    var re = new RegExp(args[0]);
    return customerData.filter((item) => re.test(item.customerId));
  }
}
And use it in my template:
<tr *ngFor="#singleCustomerData of customerData | myFilter:searchTerm">
  ...
</tr>
Now I'd like to see how many matches the pipe returns. So essentially the size of the returned array.


In angular 1.x we were able so assign the returned set to a variable in a template like so:
<div ng-repeat="person in filtered = (data | filter: query)">
</div>
But we can no longer assign variables in templates in angular2.

So how do I get the size of the filtered set without calling the filter twice?
解决方案
original

AFAIK there is currently no way to do this directly. A hack would be to add a template variable to the content and use a ViewChildren(...) query to get the created items and count them.
<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm" #someVar>
  ...
</tr>
<div>count: {{filteredItems?.length}}</div>




@ViewChildren('someVar') filteredItems;
An alternative approach would be to pass a reference to a counter variable to the pipe like shown in https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview    

update (Angular >=4.0.0)

Since Angular 4 *ngFor supports as
<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm as result">
which you can use in the template (inside the element that *ngFor is added to) like
  <div>{{result?.length}}</div>


                        
这篇关于如何在angular2中获得过滤（管道）集的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！