Question

这是我的示例代码

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>

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

请告诉我如何实现这一目标？

Answer 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

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

1 个答案: