Angular 使用分页搜索表-只搜索第一页

我正在学习Angular并构建一个应用程序来实现这一点。我有一个页面，显示数据库中的客户端列表。页面本身使用分页来组织表数据。我可以根据过滤器设置搜索表中的数据，以搜索以下列：organizationName、username和lastName

我遇到的问题是，我只能从当前正在查看的表格页面中获取结果。看起来好像没有搜索剩余的页面-（因为它们没有返回任何结果）

搜索正在使用管道进行，以过滤所有内容。有没有关于我在做什么的正确想法

客户端表.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Clients } from '../../../../_models/clients';
import { Pagination, PaginatedResult } from '../../../../_models/pagination';
import { ClientsService } from '../../../../_services/clients.service';
import { AlertifyService } from '../../../../_services/alertify.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-clients-table',
  templateUrl: './clients-table.component.html',
  styleUrls: ['./clients-table.component.scss']
})
export class ClientsTableComponent implements OnInit {
  @Input() clients: Clients[];
  @Input() pagination: Pagination;
  public searchText: string;
  public customerData: any;

  constructor(private clientsService: ClientsService, private alertify: AlertifyService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.clients = data['clients'].result;
      this.pagination = data['clients'].pagination;
    });
  }

  pageChanged(event: any): void {
    this.pagination.currentPage = event.page;
    this.loadClients();
  }

  loadClients() {
    this.clientsService.getClients(this.pagination.currentPage, this.pagination.itemsPerPage)
      .subscribe((res: PaginatedResult<Clients[]>) => {
      this.clients = res.result;
      this.pagination = res.pagination;
    }, error => {
      this.alertify.error(error);
    });
  }
}

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

@Pipe({
    name: 'grdFilter'
})
export class GrdFilterPipe implements PipeTransform {
    transform(items: any, filter: any, defaultFilter: boolean): any {
        if (!filter) {
            return items;
        }

        if (!Array.isArray(items)) {
            return items;
        }

        if (filter && Array.isArray(items)) {
            const filterKeys = Object.keys(filter);

            if (defaultFilter) {
                return items.filter(item =>
                    filterKeys.reduce((x, keyName) =>
                        (x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] === '', true));
            } else {
                return items.filter(item => {
                    return filterKeys.some((keyName) => {
                        return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] === '';
                    });
                });
            }
        }
    }
}

---

如有任何见解，将不胜感激

你能提供stackblitz吗？你的loadClients（）方法只从当前页面加载客户端。这里有两个选项：一个是将搜索词提交给返回筛选结果的端点的方法，另一个是从数据库获取所有客户端并在前端进行筛选的方法（不推荐）。是否可以提供stackblitz？loadClients（）方法仅从当前页面加载客户端。这里有两个选项：一个是将搜索词提交给返回筛选结果的端点的方法，另一个是从数据库获取所有客户端并在前端进行筛选的方法（不推荐）。

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

@Pipe({
    name: 'grdFilter'
})
export class GrdFilterPipe implements PipeTransform {
    transform(items: any, filter: any, defaultFilter: boolean): any {
        if (!filter) {
            return items;
        }

        if (!Array.isArray(items)) {
            return items;
        }

        if (filter && Array.isArray(items)) {
            const filterKeys = Object.keys(filter);

            if (defaultFilter) {
                return items.filter(item =>
                    filterKeys.reduce((x, keyName) =>
                        (x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] === '', true));
            } else {
                return items.filter(item => {
                    return filterKeys.some((keyName) => {
                        return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] === '';
                    });
                });
            }
        }
    }
}