如何用分页过滤整个表格？

Question

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

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

问题

如果我导航到第 2、3、4 页等。我会看到数据，但只要我开始在搜索框中输入，我的搜索词就不会返回任何结果。不知道为什么，但我怀疑它是 ngFor 中的 slice，但可能是非常错误的。任何帮助表示赞赏。

预期

我希望能够从表格的任何页面搜索整个表格，而不仅仅是第 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>

客户 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)
 });
 }

}

更新的搜索功能

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

}

Answer 1

请再试一次。

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;

}