如何在存在分页的angular2中获取过滤（管道）集的大小答案

【问题标题】：How to get the size of a filtered (piped) set in angular2 where pagination is present如何在存在分页的angular2中获取过滤（管道）集的大小
【发布时间】：2016-08-16 02:56:30
【问题描述】：

这是我的示例代码

Here is my sample code 

<div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search for..." #searchByName (keyup)="filterSubscriberByName($event.target.value)" value="{{searchString}}" >
    <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
    </span> </div>
</div>
<div class="clearfix"></div>

     <div *ngFor="#person of people | userGrid:searchByName.value| paginate: { itemsPerPage: 12, currentPage: p }">
        <div class="well profile_view">
            <div class="col-sm-12">
                <div class="brief">
                    <div style="float:left;">
                        <b>
                            <i>{{person.pharmacy_type | uppercase}}</i>
                        </b>
                    </div>
                    <div style="float:right;">ID : <span class="badge">{{person.id}}</span> <a class="btn"><strong>{{person.cat_name | uppercase}}</strong></a></div>
                </div>
                <div class=" col-xs-12">
                    <div style="float:left;">
                    </div>
                    <h2>{{person.name| ellipsis:30}}</h2>
                    <ul class="list-unstyled">
                        <li><b style="color:#000;"><i class="fa fa-user"></i></b> : {{person.username| ellipsis:35}}</li>
                        <li><b style="color:#f0ad4e;"><i class="fa fa-envelope"></i></b> : {{person.email | ellipsis:35}}</li>
                        <li><b style="color:#1A82C3;"><i class="fa fa-phone"></i></b> : {{person.telephone}}</li>
                    </ul>
                </div>
            </div>
    
            <div class="col-xs-12 bottom text-center">
                <div class="col-xs-12 col-sm-6 emphasis">Reg : {{person.registerDate.split(" ",1)}} </div>
                <div class="col-xs-12 col-sm-6 emphasis">
    
                    <a class="btn btn-success btn-xs" [routerLink]="['/UserDetail', {id:person.id}]"> <i class="fa fa-user"></i> View Profile</a>
                </div>
            </div>
        </div>
    </div>
<div style="clear:both;"></div>
<div class="paginator"><pagination-controls (pageChange)="p = $event" #api></pagination-controls></div>

I want to display total number of result after search filter worked .
But i am unable to get the size of array element from filtered result.

Please tell me how i can achieve that ?

走！

 <div *ngFor="#person of people | userGrid:searchByName.value| paginate: { itemsPerPage: 12, currentPage: p }">
    <div class="well profile_view">
        <div class="col-sm-12">
            <div class="brief">
                <div style="float:left;">
                    <b>
                        <i>{{person.pharmacy_type | uppercase}}</i>
                    </b>
                </div>
                <div style="float:right;">ID : <span class="badge">{{person.id}}</span> <a class="btn"><strong>{{person.cat_name | uppercase}}</strong></a></div>
            </div>
            <div class=" col-xs-12">
                <div style="float:left;">
                </div>
                <h2>{{person.name| ellipsis:30}}</h2>
                <ul class="list-unstyled">
                    <li><b style="color:#000;"><i class="fa fa-user"></i></b> : {{person.username| ellipsis:35}}</li>
                    <li><b style="color:#f0ad4e;"><i class="fa fa-envelope"></i></b> : {{person.email | ellipsis:35}}</li>
                    <li><b style="color:#1A82C3;"><i class="fa fa-phone"></i></b> : {{person.telephone}}</li>
                </ul>
            </div>
        </div>

        <div class="col-xs-12 bottom text-center">
            <div class="col-xs-12 col-sm-6 emphasis">Reg : {{person.registerDate.split(" ",1)}} </div>
            <div class="col-xs-12 col-sm-6 emphasis">

                <a class="btn btn-success btn-xs" [routerLink]="['/UserDetail', {id:person.id}]"> <i class="fa fa-user"></i> View Profile</a>
            </div>
        </div>
    </div>
</div>

我想在搜索过滤器工作后显示结果总数。但我无法从过滤结果中获取数组元素的大小。

请告诉我如何做到这一点？

【问题讨论】：

标签： filter angular pipe

【解决方案1】：

您可以尝试将组件注入管道并设置组件实例的大小。

这是一个示例：

@Pipe({
  name: 'userGrid'
})
export class userGridPipe {
  constructor(@Inject(forwardRef(() => SomeComponent)) private comp:SomeComponent) {

  }

  transform(value,params) {
    var searchByName = params[0];
    var filteredValue = value.filter((elt) => { ... });
    this.comp.filteredSize = filteredValue.length;
    return filteredValue;
  }
}

然后您可以利用组件模板中的filteredSize 属性来显示元素的数量。

查看这个问题了解更多详情：

Get data from angular 2 pipe

【讨论】：