[英]How to get a count of filtered records in angular pipe
I'm using code I found here and have modified for my purposes.我正在使用我在这里找到的代码,并已根据我的目的进行了修改。 My only issue is I can't get an accurate count of records after the Auto Search text has been entered.
我唯一的问题是在输入自动搜索文本后我无法获得准确的记录计数。 It works ok for the Group Filters though.
不过,它适用于组过滤器。
Appreciate any help.感谢任何帮助。
http://stackblitz.com/edit/ng6-multiple-search-values-q3qgighttp://stackblitz.com/edit/ng6-multiple-search-values-q3qgig
<form novalidate [formGroup]="form">
<h3>Auto Search</h3>
<input type="text" class="form-control" #searchText (input)="autoSearch.emit(searchText.value)">
<hr/>
<h3>Group Filter</h3>
<div class="row">
<div class="col-md-3 col-sm-3">
<select class="form-control" formControlName="prefix">
<option value="">Prefix</option>
<option value="MR">MR</option>
<option value="MS">MS</option>
</select>
</div>
<div class="col-md-3 col-sm-3">
<button class="btn btn-primary" (click)="search(form.value)">Search</button>
</div>
</div>
</form>
<table class="table table-responsive">
<tr>
<th>Name</th>
<th>Prefix</th>
<th>Email</th>
<th>Position</th>
<th>Gender</th>
</tr>
<tbody>
<tr *ngFor="let user of filteredUsers | filter: searchByKeyword">
<td>{{ user.name }}</td>
<td>{{ user.prefix }}</td>
<td>{{ user.email }}</td>
<td>{{ user.position }}</td>
<td>{{ user.gender }}</td>
</tr>
</tbody>
</table>
<div>Count: {{ filteredUsers.length }}</div>
From the code you have shared, i think its the object reference issue. 从您共享的代码中,我认为它是对象引用问题。
Use 采用
this.filteredUsers = Object.assign([], this.filteredUsers);
in the function filterUserList()
as 在函数
filterUserList()
中
filterUserList(filters: any, users: any): void {
this.filteredUsers = this.users; //Reset User List
const keys = Object.keys(filters);
const filterUser = user => keys.every(key => user[key] === filters[key]);
this.filteredUsers = this.users.filter(filterUser);
// added below with new object reference
this.filteredUsers = Object.assign([], this.filteredUsers);
this.ref.detectChanges();
}
Found the answer at https://stackoverflow.com/a/49038992/11248888 在https://stackoverflow.com/a/49038992/11248888找到答案
In the component ts added a field that will hold the current count 在组件ts中添加了一个将保存当前计数的字段
filteredCount = { count: 0 };
In the component html added filteredCount as a parameter to the filter pipe 在组件html中,将filteredCount作为参数添加到过滤器管道中
<tr *ngFor="let user of filteredUsers | filter:searchByKeyword:filteredCount">
interpolate filterMetadata.count into the element that displays the number of records displayed. 将filterMetadata.count插入到显示所显示记录数的元素中。
<div>AutoSearch Count: {{filteredCount.count}}</div>
In the filter pipe added the filteredCount .count field when done with filtering 在过滤管道中,在完成过滤时添加了filteredCount .count字段
transform(items, ..., filterMetadata) {
// filtering
let filteredItems = filter(items);
filteredCount.count = filteredItems.length;
return filteredItems;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.