Question

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

在我的模板中使用它：

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

现在我想知道管道返回多少匹配。所以基本上是返回数组的大小。

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

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

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

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

Answer 1

<强>原始

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

中所示

更新（Angular＆gt; = 4.0.0）

由于Angular 4 *ngFor支持as

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

您可以在模板中使用（在添加*ngFor的元素内部），例如

  <div>{{result?.length}}</div>

Answer 2

您仍然必须再次调用过滤器，但您可以直接使用它：

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

Answer 3

我不知道您对尺寸的确切要求，而Günter的解决方案可以满足您的需求。

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

@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 {
  (...)
}

看到这个答案：

How to save model manipulation of *ngFor with pipes? - "#item of (result = (items | orderAsc))" doesn't work in A2。

希望它可以帮到你，亨利

Answer 4

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>

此提示的信用点转到以下帖子：

https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213

Answer 5

您可以简单地将一个对象从类组件传递给HTML-pipe作为第二个参数。并在类管道中传递结果数组。

如何在angular2中获取过滤（管道）集的大小

5 个答案: