Filter 如何获得angular2中过滤（管道）集的大小

我写了我自己的过滤管，因为它消失在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));
  }
}

从'angular2/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：“myFilter”
})
导出类MyFilter实现PipeTransform{
转换（customerData:Array，args:any[]）{
如果（customerData==未定义）{
返回；
}
var re=new RegExp（args[0]）；
返回customerData.filter（（item）=>re.test（item.customerId））；
}
}

并在我的模板中使用它：

<tr *ngFor="#singleCustomerData of customerData | myFilter:searchTerm">
  ...
</tr>

...

现在我想看看管道返回的匹配项有多少。因此本质上是返回数组的大小

在angular 1.x中，我们能够将返回的集合分配给模板中的变量，如下所示：

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

但我们不能再在angular2的模板中分配变量

---

那么，如何在不调用过滤器两次的情况下获得过滤集的大小呢？

original

AFAIK目前还没有直接做到这一点的方法。一种方法是向内容中添加一个模板变量，并使用

ViewChildren（…）

查询来获取创建的项目并对其进行计数

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm" #someVar>
  ...
</tr>
<div>count: {{filteredItems?.length}}</div>

另一种方法是将计数器变量的引用传递给管道，如中所示

更新（角度>=4.0.0）

因为

*ngFor

支持

as

<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm as result">

---

我不知道你到底想用这个尺寸做什么，而且君特的解决方案可以满足你的需要

也就是说，您可以将组件实例注入到管道中，并直接将长度设置到该组件的属性中

@Pipe({
  name: 'dump'
})
export class DumpPipe {
  constructor(@Inject(forwardRef(() => AppComponent)) app:AppComponent) {
    this.app = app;
  }

  transform(array: Array<string>, args: string): Array<string> {
    (...)
    this.app.filteredItemLength = array.length;

    return array;
  }
}

@Component({
  (...)
})
export class AppComponent {
  (...)
}

@管道({
名称：“转储”
})
导出类转储管道{
构造函数（@Inject（forwardRef（（）=>AppComponent））app:AppComponent）{
this.app=app；
}
转换（数组：数组，参数：字符串）：数组{
(...)
this.app.filteredItemLength=array.length；
返回数组；
}
}
@组成部分({
(...)
})
导出类AppComponent{
(...)
}

看看这个答案：

希望它能帮助你，

---

Thierry

您只需将对象作为第二个参数从类组件传递到HTML管道。并在类pipe中传递生成的数组。

您仍然必须再次调用筛选器，但您可以像这样直接使用它：

{{ (customerData | myFilter:searchTerm)?.length }}

---

Gunter的答案是正确的，它只缺少关于如何在*ngFor循环外使用结果的信息。一种可能的解决方案是将*ngFor包含在更广泛的指令中，如下所示：

<ng-directive *ngIf='customerData | myFilter:searchTerm as filteredItems'>
   <tr *ngFor="let singleCustomerData of filteredItems">
   ...
   </tr>
   <div>count: {{filteredItems.length}}</div>
</ng-directive>

...
计数：{{filteredItems.length}

此提示的积分可转到以下帖子：

---

在角度>=4部分中，您知道如何在*ngFor块之外使用它吗？在我的例子中，我必须在另一个逻辑中使用这个数字。我认为在模板中没有这样做的方法。您需要在组件代码中运行筛选器，并将长度指定给一个字段，以使其在模板中可用。@GünterZöchbauer我可以在我的组件中以某种方式访问此filteredItems列表吗？@SalmanKazmi不，没有办法。改为在组件中过滤它，并使其可用于模板。这个答案对我来说很有用，它是前一个实例的一个保留值。

{{ (customerData | myFilter:searchTerm)?.length }}

<ng-directive *ngIf='customerData | myFilter:searchTerm as filteredItems'>
   <tr *ngFor="let singleCustomerData of filteredItems">
   ...
   </tr>
   <div>count: {{filteredItems.length}}</div>
</ng-directive>