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

大家早上好

我正在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>

{{entry.asset}
{{entry.model}
{{entry.serial}
{{entry.ip}
{{entry.notes}

应用程序组件.ts

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

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

searchText:string=''；
条目：条目[]=[]；
页面输入：数组；
onChangePage（pageOfEntries:Array）{
//更新项目的当前页面
this.pageOfEntries=pageOfEntries；
}

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

---

当组件负载和

entry

等于完整列表时，您可以将其存储在不同的变量中（现在称之为

totalEntry

）。执行搜索时，您可以在

totalEntry

上搜索，而不是在

entry

上搜索，并显示该数组

经过几次尝试，我想出了以下解决方案：

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

我将使用同一个div两次。第一个实现分页，而另一个不实现分页

当用户不搜索某个内容并且搜索输入字段为空（

searchText==''

）时，结果很多，因此必须实现分页

<div *ngIf="searchText == ''">
   <table>
      <tr *ngFor="let entry of pageOfEntries">
         <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>
</div>

{{entry.asset}
{{entry.model}
{{entry.serial}
{{entry.ip}
{{entry.notes}

另一方面，如果用户搜索某物，我需要搜索所有条目。为此，必须禁用分页

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

{{entry.asset}
{{entry.model}
{{entry.serial}
{{entry.ip}
{{entry.notes}

从一开始，问题就出现在

*ngFor=“let entry of entries | filter:searchText”

。字符串

searchText

是用户的搜索输入，

条目

是数据库中的所有数据。因此，“searchText”中保存的关键字将在所有“条目”中进行搜索

---

使用分页时，必须将

条目

从

页面的条目

中替换出来，这是显示的10个条目。所以问题是只搜索了这10个条目。

尝试在stackblitz上创建一个演示，以重新创建问题