如何使用分页在Angular 8中搜索所有数据

Question

大家早上好！

我正在Angular 8中构建一个应用程序，该应用程序显示带有数据库中某些数据的表。它包括一个搜索框和一个分页组件。我正在使用软件包“ Ng2SearchPipeModule”和“ JwPaginationComponent”。

当我禁用分页时，搜索功能可以正常工作。但是，当我启用了分页功能时，仅搜索显示的几个条目，而不是全部搜索。

是否有技巧绕过此问题？预先感谢您的帮助！

app.component.html

<input type="text" name="search" [(ngModel)]="searchText" autocomplete="off" placeholder="Search...">

<table>
   <tr *ngFor="let entry of pageOfEntries | filter:searchText">
      <th>{{ entry.asset }}</th>
      <th>{{ entry.model }}</th>
      <th>{{ entry.serial }}</th>
      <th>{{ entry.ip }}</th>
      <th>{{ entry.notes }}</th>
   </tr>
</table>

<jw-pagination [items]="entries" (changePage)="onChangePage($event)"></jw-pagination>

app.component.ts

searchText: string = '';
entries: Entry[] = [];
pageOfEntries: Array<any>;

onChangePage(pageOfEntries: Array<any>) {
   // update current page of items
   this.pageOfEntries = pageOfEntries;
}

Answer 1

由于信息量有限，调试问题并不容易。但是，我的想法如下：

当组件负载且entry等于完整列表时，可以将其存储在其他变量中（现在将其称为totalEntry）。搜索时，可以在entry上进行搜索，而不必在totalEntry上进行搜索，而是显示该数组。

Answer 2

 onChangePage(pageOfItems: Array) {
        // update current page of items
        this.pageOfItems = pageOfItems;
    }
**After this you have to try below.**

import { EventEmitter, OnInit, OnChanges, Component, Input, Output } from @angular/core';
import {paginate} from 'jw-paginate';

@Component({
  moduleId: module.id,
  selector: 'jw-pagination',
  template: `

      First


      Previous


      {{page}}


      Next


      Last

`
})

export class JwPaginationComponent implements OnInit, OnChanges {
  @Input() items: Array;
  @Output() changePage = new EventEmitter(true);
  @Input() initialPage = 1;
  @Input() pageSize = 10;
  @Input() maxPages = 10;

  pager: any = {};

  ngOnInit() {
    //if items array is not empty
    if (this.items && this.items.length) {
      this.setGridPage(this.initialPage);
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    // Reset page if the items array has been changed
    if (changes.items.currentValue !== changes.items.previousValue) {
      this.setGridPage(this.initialPage);
    }
  }

  private setGridPage(page: number) {
    // get data base on page number
    this.pager = paginate(this.items.length, page, this.pageSize, this.maxPages);
    var pageOfItems = this.items.slice(this.pager.startIndex, this.pager.endIndex + 1);
    this.changePage.emit(pageOfItems);
  }
}