Angular 如何获取在应用过滤管后的总记录数

如何获取在应用过滤管后的记录总数

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

我的组件文件：

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>

---

您可以使用ViewChild对此进行存档。试试这个：

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

---

您可以使用ViewChild对此进行存档。试试这个：

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

---

这会给你准确的数字

您需要在组件中保留用于计数的数组或对象，并将其从模板传递到管道。根据过滤数据的管内设定值

组件

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;
  }

}

---

这会给你准确的数字

您需要在组件中保留用于计数的数组或对象，并将其从模板传递到管道。根据过滤数据的管内设定值

组件

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;
  }

}