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

【问题标题】：How to search all the data in Angular 8 with pagination used如何使用分页搜索Angular 8中的所有数据
【发布时间】：2020-04-01 03:31:43
【问题描述】：

大家早上好！！

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

【问题讨论】：

尝试在 stackblitz 上创建一个演示来重现问题

标签： angular search pagination angular8

【解决方案1】：

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

我将使用相同的 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>

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

<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>

问题从一开始就位于*ngFor="let entry of entries | filter:searchText"。字符串searchText 是用户的搜索输入，entries 是数据库中的所有数据。因此，保存在“searchText”中的关键字正在所有“条目”中进行搜索。

使用分页，entries 必须从 pageOfEntries 替换，这是显示的 10 个条目。所以问题是只搜索了这 10 个条目。

【讨论】：

【解决方案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);
  }
}

【讨论】：

【解决方案3】：

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

当组件加载且entry 等于完整列表时，您可以将其存储在不同的变量中（我们暂时称其为totalEntry）。当您进行搜索时，您可以搜索 totalEntry，而不是搜索 entry，并改为显示该数组。

【讨论】：