typescript 如何获得在 angular2 中设置的过滤（管道）的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35127257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the size of a filtered (piped) set in angular2
提问by neric
I wrote my own filter pipe as it disappeared in 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));
}
}
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:
在 angular 1.x 中，我们能够将返回的集合分配给模板中的变量，如下所示：
<div ng-repeat="person in filtered = (data | filter: query)">
</div>
But we can no longer assign variables in templates in angular2.
但是我们不能再在 angular2 的模板中分配变量。
So how do I get the size of the filtered set without calling the filter twice?
那么如何在不调用过滤器两次的情况下获得过滤集的大小呢？
采纳答案by Günter Z?chbauer
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.
AFAIK 目前无法直接执行此操作。一个技巧是将模板变量添加到内容中，并使用ViewChildren(...)查询来获取创建的项目并对其进行计数。
<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
另一种方法是将计数器变量的引用传递给管道，如https://plnkr.co/edit/Eqjyt4qdnXezyFvCcGAL?p=preview所示
update (Angular >=4.0.0)
更新（角度 >=4.0.0）
Since Angular 4*ngForsupports as
由于Angular 4*ngFor支持as
<tr *ngFor="let singleCustomerData of customerData | myFilter:searchTerm as result">
which you can use in the template (inside the element that *ngForis added to) like
您可以在模板中使用它（在*ngFor添加到的元素内），例如
<div>{{result?.length}}</div>
回答by A. Morel
You still must call the filter a second time but you can use it directly like this :
您仍然必须再次调用过滤器，但您可以像这样直接使用它：
{{ (customerData | myFilter:searchTerm)?.length }}
回答by sertal70
Gunter answer is in the right direction, it lacks only the info on how to use the result out of the *ngFor loop. One possible solution is to enclose the *ngFor in a wider directive, like the following:
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>
Credits for this hint go to the following post:
此提示的积分转到以下帖子：
https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213
https://netbasal.com/using-pipe-results-in-angular-templates-430683fa2213
回答by Thierry Templier
I don't know what you exactly want to do with the size and the Günter's solution can fit your needs.
我不知道你到底想用这个尺寸做什么，君特的解决方案可以满足你的需求。
That said, you can inject the component instance into your pipe and set directly the length into a property of this component.
也就是说，您可以将组件实例注入管道，并直接将长度设置为该组件的属性。
@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 {
(...)
}
See this answer:
看到这个答案：
Hope it helps you, Thierry
希望对你有帮助，蒂埃里
回答by ktretyak
You can simply pass an object from the class component to HTML-pipe as the second argument. And in the class pipe pass the resulting array.
您可以简单地将一个对象从类组件传递给 HTML-pipe 作为第二个参数。并在类管道中传递结果数组。
