如何在以角度应用过滤管道后获取记录总数

Question

如何在以角度应用过滤器管道后获取记录总数。

这是我的示例代码，我已经尝试过，但我没有得到行的确切长度。

我的组件文件：

import { Component, OnInit } from '@angular/core';
import { Employee } from './Employee';
import { EmployeeService } from './employee.service';
@Component({
selector: 'app-employees',
templateUrl: './employees.component.html',
styleUrls: ['./employees.component.css']
})
export class EmployeesComponent implements OnInit {
public employees : Employee[];
searchValue : string="";
count : number = 0 ;

我的模板代码：

<label>Total number of Employees : </label>  
<label id="count">{{count}}</label> 
<tr *ngFor="let employee of employees | namefilter: searchValue ; let count = index">
<td #name{{employee.id}} id="name{{employee.id}}">{{employee.name}}</td>
<td #loc{{employee.id}} id="loc{{employee.id}}">{{employee.location}}</td>
<td #email{{employee.id}} id="email{{employee.id}}">{{employee.email}}</td>
<td #mobile{{employee.id}} id="mobile{{employee.id}}">{{employee.mobile}}</td>
</tr>

我的过滤器管道代码：

import { Pipe, PipeTransform } from '@angular/core';
import { Employee } from './employees/employee';
@Pipe({
name: 'namefilter'
})
export class NamefilterPipe implements PipeTransform {
transform(param1: Employee[], param2: string): object {
if(!param1) 
return [];
if(!param2) return param1;
var search = param2.toLowerCase();
return param1.filter((a) =>
{
return a.name.toLowerCase().startsWith(search);
} );
return null;
}
}

Answer 1

您可以使用ViewChild 将其存档。试试这个：

<label>Total number of Employees : </label>  
<label id="count">{{count}}</label> 

在您的 HTML 中：

<tr #myFilter *ngFor="let employee of employees | namefilter: searchValue ; let count = index">
<td #name{{employee.id}} id="name{{employee.id}}">{{employee.name}}</td>
<td #loc{{employee.id}} id="loc{{employee.id}}">{{employee.location}}</td>
<td #email{{employee.id}} id="email{{employee.id}}">{{employee.email}}</td>
<td #mobile{{employee.id}} id="mobile{{employee.id}}">{{employee.mobile}}</td>
</tr>

在您的 .ts 中： @ViewChildren('myFilter '( 创建的项目;

count : number = 0 ;
ngAfterViewInit() {
this.count  = this.createdItems.toArray().length;
}

Answer 2

这将为您提供确切的计数

https://stackblitz.com/edit/angular-eids9h

您需要在组件中保留一个数组或对象以进行计数，并将其从模板传递到管道。根据过滤数据在管道中设置值

元件

filteredCount = { count: 0 };

this.filteredCount.count = this.employees.length

模板

<label>Total number of Employees : </label>  
<label id="count">{{filteredCount.count}}</label> 
<tr *ngFor="let employee of employees | namefilter: searchValue : filteredCount">
<td #name{{employee.id}} id="name{{employee.id}}">{{employee.name}}</td>
<td #loc{{employee.id}} id="loc{{employee.id}}">{{employee.location}}</td>
<td #email{{employee.id}} id="email{{employee.id}}">{{employee.email}}</td>
<td #mobile{{employee.id}} id="mobile{{employee.id}}">{{employee.mobile}}</td>
</tr>

管

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'namefilter'
})
export class NamefilterPipe implements PipeTransform {
transform(param1: any[], param2: string,filteredCount:any): object {    
if(!param1) 
return [];
if(!param2) return param1;
var search = param2.toLowerCase();
filteredCount.count = 0;
return param1.filter((a) =>
{
if(a.name.toLowerCase().startsWith(search)){
filteredCount.count = filteredCount.count + 1
return true
}
} );
return null;
}
}