Angular中如何在UI页面显示搜索结果的更新记录数

你当前的问题是：过滤表格后总记录数未更新，原因是你绑定的是原始数组prodcuts的长度，而模板中的filter管道只是在视图层临时过滤数据，并没有修改原始数组，所以总数始终显示的是未过滤前的数量。

下面提供两种可行的解决方法：

方法一：模板内捕获过滤结果（无需修改TS逻辑） #

利用Angular的模板变量特性，先将过滤后的结果赋值给一个变量，再用这个变量的长度作为总记录数，同时给分页组件传入过滤后的总条数：

<!-- 外层容器捕获过滤后的数组 -->
<div *ngIf="(prodcuts | filter:term) as filteredProducts">
    <div class="paginationDiv">
        <div class="pagination-div">
            <pagination-controls class="text-right" (pageChange)="pageNumber = $event"></pagination-controls>
        </div>
        <div class="total">
            <!-- 显示过滤后的记录数 -->
            <span class="totalCount">{{filteredProducts?.length || 0}} Records</span>
        </div>
    </div>
    <div class="tabl table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="header">S.No</th>
                    <th class="header">Product Number</th>
                    <th class="header">Company Name</th>
                    <th class="header">Created Date</th>
                </tr>
            </thead>
            <tbody *ngIf="filteredProducts.length">
                <ng-container *ngFor="let item of filteredProducts | paginate: { 
                    itemsPerPage: 10, 
                    currentPage: pageNumber,
                    totalItems: filteredProducts.length 
                }; let i = index">
                    <tr class="cursor">
                        <td>{{i+1}}</td>
                        <td>{{item?.product_number}}</td>
                        <td>{{item?.company_name}}</td>
                        <td>{{item?.created_date | date :'short'}}</td>
                    </tr>
                </ng-container>
            </tbody>
        </table>
    </div>
</div>

方法二：TS层处理过滤逻辑（推荐，性能更优） #

模板管道在大数据量场景下性能较差，更推荐在TS中维护过滤后的数组，直接绑定到视图：

1. 修改TS代码 #

import { Component, OnInit, SimpleChanges } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  prodcuts: any[] = []; // 从API获取的原始数据
  filteredProducts: any[] = []; // 过滤后的数组
  term: string = '';
  pageNumber = 1;

  ngOnInit() {
    // 假设这里是获取API数据的逻辑
    // this.fetchProducts().then(data => {
    //   this.prodcuts = data;
    //   this.filteredProducts = [...this.prodcuts];
    // });
  }

  // 监听原始数组变化，同步过滤
  ngOnChanges(changes: SimpleChanges) {
    if (changes['prodcuts']?.currentValue) {
      this.filterProducts();
    }
  }

  // 监听搜索关键词变化（替代ngModel的双向绑定）
  set searchTerm(value: string) {
    this.term = value;
    this.filterProducts();
    this.pageNumber = 1; // 过滤后重置页码到第一页
  }

  get searchTerm() {
    return this.term;
  }

  // 自定义过滤逻辑
  private filterProducts() {
    if (!this.prodcuts) return;
    const lowerTerm = this.term.toLowerCase();
    this.filteredProducts = this.prodcuts.filter(item => 
      item.product_number?.toLowerCase().includes(lowerTerm) ||
      item.company_name?.toLowerCase().includes(lowerTerm) ||
      item.created_date?.toLowerCase().includes(lowerTerm)
    );
  }
}

2. 修改HTML模板 #

<div class="table-filter-options">
    <div class="search-bar-div">
        <div class="search-input-wrapper">
            <input type="text" class="form-control" [(ngModel)]="searchTerm" placeholder="Search...">
            <i class="fa fa-search"></i>
        </div>
    </div>
</div>
<div class="paginationDiv">
    <div class="pagination-div">
        <pagination-controls class="text-right" (pageChange)="pageNumber = $event"></pagination-controls>
    </div>
    <div class="total">
        <span class="totalCount">{{filteredProducts?.length || 0}} Records</span>
    </div>
</div>
<div class="tabl table-responsive">
    <table class="table table-hover">
        <thead>
            <tr>
                <th class="header">S.No</th>
                <th class="header">Product Number</th>
                <th class="header">Company Name</th>
                <th class="header">Created Date</th>
            </tr>
        </thead>
        <tbody *ngIf="filteredProducts.length">
            <ng-container *ngFor="let item of filteredProducts | paginate: { 
                itemsPerPage: 10, 
                currentPage: pageNumber 
            }; let i = index">
                <tr class="cursor">
                    <td>{{i+1}}</td>
                    <td>{{item?.product_number}}</td>
                    <td>{{item?.company_name}}</td>
                    <td>{{item?.created_date | date :'short'}}</td>
                </tr>
            </ng-container>
        </tbody>
    </table>
</div>

内容的提问来源于stack exchange，提问作者Raj Kumar