Angular 7 自定义管道，返回搜索文本以及项目计数

Question

>我有一个搜索功能，用于搜索使用自定义过滤器管道的表。它正确返回文本。但是，我还需要能够在应用过滤器后返回项目计数。

我需要能够访问一对一组件中的项目计数，以便我可以将其应用于分页计算。

一对一组件.html ， 一对一组件.ts ， 自定义过滤管

搜索条形码 ：

<input id="tableSearch" type="text" class="form-control" placeholder="Search.." 
[(ngModel)]="searchText">

表过滤器 ：

<ng-container *cdkVirtualFor="let obj of myArray | searchFilter:  searchText | slice: (page-1) * 
pageSize : (page-1) * pageSize + pageSize" >

搜索筛选器来自自定义筛选器管道。 searchFilter.pipe.ts 内容 ：

import { Pipe, PipeTransform } from '@angular/core';
import { NGXLogger } from 'ngx-logger';
@Pipe({
name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {
constructor(private logger: NGXLogger){}
/**
* @param items object from array
* @param term term's search
* @param excludes array of strings which will ignored during search
*/
transform(items: any, term: string, excludes: any = []): any {
console.log(" the passed in params are :  items = " + items + " term = " + term + " exludes = " + excludes);
if (!term || !items) return items;
return SearchFilterPipe.filter(items, term , excludes);
}
/**
*
* @param items List of items to filter
* @param term  a string term to compare with every property of the list
* @param excludes List of keys which will be ignored during search
*/
static filter(items: Array<{ [key: string]: any }>, term: string, excludes: any): Array<{ [key: string]: any }> {
const toCompare = term.toLowerCase();
function checkInside(item: any, term: string) {
for (let property in item) {
if (item[property] === null || item[property] == undefined || excludes.includes(property)) {
continue;
}
if (typeof item[property] === 'object') {
if (checkInside(item[property], term)) {
return true;
}
}
else if (item[property].toString().toLowerCase().includes(toCompare)) {
return true;
}
}
return false;
}
return items.filter(function (item) {
return checkInside(item, term);
});
}
}

Answer 1

如果我正确理解了您的问题，这应该对您有用。

parentComponent.ts

import { Subject } from 'rxjs';
count = new Subject();
ngOnInit(){
this.getEmployees();
this.count.subscribe(c => console.log('Counting', c));
console.log("Count " + this.countVar);
}

父组件.html

<tbody>
<ng-container *ngFor = "let obj of employees | searchFilter:  searchText: count" #countVar>
<tr>
<td>{{obj.code}}</td>
<td>{{obj.name}}</td>
<td>{{obj.gender}}</td>
<td>{{obj.salary}}</td>
<td>{{obj.dob}}</td>
</tr>
</ng-container>
Showing {{count | async}} Employees
<!-- Showing {{searchResult.length}} Employees -->
</tbody>

管道.ts

import { Pipe, PipeTransform, Output, EventEmitter } from '@angular/core';
import { Subject } from 'rxjs';
@Pipe({
name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {
constructor(){}
transform(items: any, term: string, count , excludes: any = []): any {
if (!term || !items) return items;
return SearchFilterPipe.filter(items, term , count, excludes);
}
static filter(items: Array<{ [key: string]: any }>, term: string, count, excludes: any): Array<{ [key: string]: any }> {
console.log(term);
const toCompare = term.toLowerCase();
function checkInside(item: any, term: string) {
for (let property in item) {
if (item[property] === null || item[property] == undefined || excludes.includes(property)) {
continue;
}
if (typeof item[property] === 'object') {
if (checkInside(item[property], term)) {
return true;
}
}
else if (item[property].toString().toLowerCase().includes(toCompare)) {
return true;
}
}
return false;
}
const newArr = items.filter(function (item) {
return checkInside(item, term);
});
count.next(newArr.length);
return newArr;
}
}