Angular 如何使用分页过滤整个表？

我有一个分页的表格和一个搜索框

下面的当前代码仅在用户位于表的第1页时搜索整个表（即第1、2、3、4页等的数据），并返回正确的结果

问题

如果我导航到第2页、第3页、第4页等，我会看到数据，但一旦我开始在搜索框中键入，我的搜索词就不会返回任何结果。不知道为什么，但我怀疑这是ngFor中的切片，可能是非常错误的。感谢您的帮助

预期的

我希望能够从表的任何页面搜索整个表，而不仅仅是第1页

客户HTML

 <div class="row">
    <div class="col">
        <div class="card shadow">
            <div class="card-header border-0">
                <h3 class="mb-0">Customers</h3>
                <div class="search-bar-wrapper">
                    <form class="navbar-search form-inline mr-3 d-none d-md-flex ml-lg-auto">
                        <div class="form-group mb-0">
                            <div class="input-group input-group-alternative">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                </div>
                                <input id="searchInput" class="form-control" [formControl]="filter" placeholder="Search" type="text">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table align-items-center table-flush" id="customersTable">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">Name</th>
                            <th scope="col">Contact Email</th>
                            <th scope="col">Package</th>
                            <th scope="col">Subscription</th>
                            <th scope="col">Active</th>
                            <th scope="col">Customer Since</th>
                            <th scope="col"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let cust of customers$ | async | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
                            <td class="primaryColumn">
                                {{cust.name.S}}
                            </td>
                            <td>
                                {{cust.email.S}}
                            </td>
                            <td>
                                {{cust.package_name.S}}
                            </td>
                            <td>
                                {{cust.subscription_name.S}}
                            </td>
                            <td [ngClass]="{
              'active' : cust.sub_status.BOOL == true,
              'inactive' : cust.sub_status.BOOL == false
           }">
                                {{cust.sub_status.BOOL}}
                            </td>
                            <td>
                                {{cust.date_created.S}}
                            </td>
                            <td class="text-right">
                                <div ngbDropdown placement="bottom-right">
                                    <a class="btn btn-sm btn-icon-only text-light" ngbDropdownToggle>
                                        <i class="fas fa-ellipsis-v"></i>
                                    </a>
                                    <div ngbDropdownMenu class=" dropdown-menu-right dropdown-menu-arrow">
                                        <a class="dropdown-item" (click)="selectCustomer(cust);openForm(custUpdate)"><i class="fas fa-edit"></i><span class="menu-option">Edit</span></a>
                                        <a class="dropdown-item" (click)="selectCustomer(cust);openForm(custDelete)"><i class="fas fa-trash"></i><span class="menu-option">Delete</span></a>
                                    </div>
                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="card-footer py-4">
                <button id="create" class="btn btn-primary" (click)="openForm(custCreate)">Create</button>
                <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="customers.length" [boundaryLinks]="true" [maxSize]="5"></ngb-pagination>
            </div>
        </div>
    </div>
</div>

客户
名称
联系电子邮件
包裹
订阅
活跃的
客户自
{{cust.name.S}
{{cust.email.S}
{{cust.package_name.S}
{{cust.subscription_name.S}
{{cust.sub_status.BOOL}}
{{cust.date_created.S}
编辑
删除
创造

客户TS

export class CustomerComponent implements OnInit {    
customers:any;
page= 1;
pageSize= 10;

customers$: Observable<any>;
filter = new FormControl('');

constructor(private dataService: DataService, private modalService: NgbModal, private 
customerService: CustomerService, private numberService: NumberService, 
private filterService: FilterService, private formBuilder: FormBuilder,  private 
ngbDateParserFormatter: NgbDateParserFormatter, private _snackBar: MatSnackBar, pipe: DecimalPipe) {
  this.customers$ = this.filter.valueChanges.pipe(
    startWith(''),
    map(text => this.search(text, pipe))
  );
}

search(text: string, pipe: PipeTransform): any {
  return this.customers.filter(customer => {
    const term = text.toLowerCase();
    return customer.name.S.toLowerCase().includes(term)
 });
 }

导出类CustomerComponent实现OnInit{
顾客：有；
page=1；
页面大小=10；
顾客$：可观察的；
过滤器=新窗体控件（“”）；
构造函数（私有数据服务：数据服务，私有modalService:NgbModal，私有
customerService:customerService，私人号码服务：号码服务，
private filterService:filterService，private formBuilder:formBuilder，private
ngbDateParserFormatter:ngbDateParserFormatter，private（snackBar:matsnakbar，pipe:DecimalPipe）{
this.customers$=this.filter.valueChanges.pipe(
startWith（“”），
映射（text=>this.search（text，pipe））
);
}
搜索（文本：字符串，管道：PipeTransform）：任意{
返回此.customers.filter（customer=>{
const term=text.toLowerCase（）；
return customer.name.S.toLowerCase（）.includes（术语）
});
}

}

更新的搜索功能

search(text: string, pipe: PipeTransform): any {
return this.customers.filter(customer => {
  if (customer.length < (this.page-1) * this.pageSize + this.pageSize) {
    this.page++;
  }
  const term = text.toLowerCase();
  return customer.name.S.toLowerCase().includes(term)
});

搜索（文本：字符串，管道：管道变换）：任意{
返回此.customers.filter（customer=>{
如果（customer.length<（this.page-1）*this.pageSize+this.pageSize）{
这个.page++；
}
const term=text.toLowerCase（）；
return customer.name.S.toLowerCase（）.includes（术语）
});

---

}

请像这样再试一次

search(text: string, pipe: PipeTransform): any {
if(!text) {
  return this.customers;
}

  const filterdCustomers = this.customers.filter(customer => {
    const term = text.toLowerCase();
    return customer.name.S.toLowerCase().includes(term)
  });

  if (filterdCustomers.length < (this.page-1) * this.pageSize + 
  this.pageSize) {
    this.page = 1;
  }

  return filterdCustomers;

}

搜索（文本：字符串，管道：管道变换）：任意{
如果（！text）{
把这个还给顾客；
}
const filterdCustomers=this.customers.filter（customer=>{
const term=text.toLowerCase（）；
return customer.name.S.toLowerCase（）.includes（术语）
});
如果（filterdCustomers.length<（this.page-1）*this.pageSize+
此参数（页面大小）{
本页=1；
}
退回客户；
}

你能创建一个StackBlitz吗？这里有一个从后端获取数据的服务，因此无法让它显示，但我包含了整个客户TS和HTML文件。@AleksandarZoric我认为这个函数是错误的。让我更正函数，等等。我想你还有另一个问题。让我更新函数；明亮的你就是那个有用的人。非常感谢-我整个上午都在为这个挠痒。没问题，也谢谢你。但有一件事请你核实一下，然后告诉我。试着搜索一些东西。然后删除搜索到的单词。你看到结果了吗？我现在就试试-给我一点时间。没有问题。我把它作为一个搜索词，它返回正确的结果，因为不考虑我在哪一页。然后我完全删除搜索词，表格显示该页面上预期的所有数据。好的，很好。否则，我已经更新了答案。我认为它将返回一个空数组。