Angular 16 - 如何在数据表中的所有分页页面（而不仅仅是表的第一页）中搜索过滤器

Question

我有一个使用 NgxPaginationModule 很好地分页的数据表。我想通过我的表进行搜索过滤器，但由于数据是分页的，我只能获得当前页面的搜索过滤器结果，而不是整个表。我为此实现了一个搜索过滤器管道。任何帮助使其正常工作的帮助将不胜感激。

我的seach过滤管

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'searchFilter'
})
export class SearchFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (!value) return null;
    if (!args) return value;

    args = args.toLowerCase();
    debugger;
    
    return value.filter(function(item: any) {
      return JSON.stringify(item)
       .toLowerCase()
       .includes(args);
    })
  }

}

我的搜索栏

<div class="d-flex align-items-center position-relative my-1">
   <i class="ki-outline ki-magnifier fs-3 position-absolute ms-5"></i>
   <input type="text" data-kt-customer-table-filter="search" class="form-control w-250px ps-12 me-3" placeholder="Search..." [(ngModel)]="searchText">
</div>

我的表格分页和搜索过滤器

<tbody class="fw-semibold text-gray-600">
   <tr class="odd" *ngFor="let matter of Matters | paginate: { itemsPerPage: pageSize, currentPage: page, totalItems: count } | searchFilter: searchText">           </tr>
</tbody>

我的应用程序.ts

export class AllMattersComponent {
  isLoading: boolean = false;
  response: boolean = false;
  Matters: any[] = []
  page: number = 1;
  count!: number;
  pageSize: number = 10;
  pageSizes = [10, 50, 100, 150, 250];
  searchText = '';

  ngOnInit(): void {
     this.loadMatters();
  }

  loadMatters(){
    this.apiservice.viewMatters().subscribe((res: any) => {
      if(res.status === 200){
        this.response = true;
        this.isLoading = false;
        this.Matters = res.results;
        this.count = res.count;
        this.Matters = this.Matters.map(matter => {
          return {
            ...matter,
            client_name: matter.client_person ? matter.client_person.full_name : matter.client_company ? matter.client_company.company_name : ''
          };
        });
      } else if (res.status === 400){
        this.showError(res.results.error);
        this.response = true;
        this.isLoading = false;
      }
    }
 );

}

Answer 1

首先搜索过滤器，然后对结果进行分页。

<tbody class="fw-semibold text-gray-600">
   <tr class="odd" *ngFor="let matter of Matters | searchFilter: searchText | paginate: { itemsPerPage: pageSize, currentPage: page, totalItems: count }">           </tr>
</tbody>