如何在angular2中获取过滤（管道）设置的大小答案

【问题标题】：How to get the size of a filtered (piped) set in angular2如何在angular2中获取过滤（管道）设置的大小
【发布时间】：2016-05-09 17:03:39
【问题描述】：

我写了我自己的过滤管，因为它在 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的模板中分配变量了。

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

【问题讨论】：

标签： filter typescript pipe angular

【解决方案1】：

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

【讨论】：

这个答案对我有用，接受了前一个实例的保留值。

【解决方案2】：

原创

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 >=4.0.0）

由于Angular 4*ngFor支持as

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

您可以在模板中使用（在添加*ngFor 的元素内）喜欢

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

【讨论】：

在 angular>=4 部分，你知道我们如何在 *ngFor 块之外使用它吗？就我而言，我必须在另一个逻辑中使用该数字。
我认为模板中没有办法做到这一点。您需要在组件代码中运行过滤器并将长度分配给字段以使其在模板中可用。
@GünterZöchbauer 我可以在我的组件中以某种方式访问此过滤的项目列表吗？
@SalmanKazmi 不，没有办法。而是在组件中过滤它并使其可用于模板。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

我不知道您到底想对尺寸做什么，而 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。

希望对你有帮助蒂埃里

【讨论】：