代码之家 › 专栏 › 技术社区 › Elaine Byene

搜索仅在Angular 17中的当前页面上工作

ng-bootstrap ngfor filtering pagination angular

Elaine Byene · 技术社区 · 1 年前

此搜索功能仅从显示的页面进行搜索。如果我在第1页,它只搜索第1页;同样,如果我在第2页,它只会搜索第2页。

我需要做哪些更改来解决这个问题?

Angular HTML:

<div>
  <input type="text" [(ngModel)]="searchQuery" (ngModelChange)="filterPatients()" />
</div>

<div *ngFor="let item of filteredOpdPatients; let count = index">
  <div class="row">
    <div class="col">{{ count + 1 }}</div>
    <div class="col">{{ item.registration.patientRegistrationId }}</div>
    <div class="col">{{ item.registration.firstName }}</div>
    <div class="col">{{ item.date | date: "dd MMM, yyyy '' hh:mm a" }}</div>
  </div>
</div>
<app-pagination [page]=paginationData.page [collectionSize]=paginationData.total [pageSize]=paginationData.limit  (paginateEvent)="paginateTo($event)"></app-pagination>

角度TS代码:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpParams } from '@angular/common/http';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Opd } from 'src/app/interfaces/opd';
import { Pagination } from 'src/app/interfaces/pagination';
import { CoreService } from 'src/app/services/core.service';
import { DashboardService } from '../../dashboard.service';

@Component({
  selector: 'app-opd-patients',
  templateUrl: './opd-patients.component.html',
  styleUrls: ['./opd-patients.component.css']
})
export class OpdPatientsComponent implements OnInit {
  public opdPatients: Opd[] = [];
  public filteredOpdPatients: Opd[] = [];
  public paginationData: Pagination = {} as Pagination;
  public componentQuery = new HttpParams();
  public searchQuery: string = '';

  constructor(
    private coreService: CoreService,
    private router: Router,
    private dashboardService: DashboardService,
    private ngbModal: NgbModal
  ) {}

  ngOnInit(): void {
    this.getPatients();
  }

  getPatients(): void {
    this.coreService.getOpds(this.componentQuery).subscribe({
      next: (res: any) => {
        this.opdPatients = res.data;
        this.paginationData = res;
        this.filterPatients();
      }
    });
  }

  filterPatients(): void {
    if (!this.searchQuery) {
      this.filteredOpdPatients = [...this.opdPatients];
    } else {
      const query = this.searchQuery.toLowerCase();
      this.filteredOpdPatients = this.opdPatients.filter(patient =>
        patient.registration.patientRegistrationId.toLowerCase().includes(query)
      );
    }
  }

  paginateTo(page: number): void {
    this.componentQuery = this.componentQuery.set('page', page);
    this.getPatients();
  }
}

这是分页HTML:

<ngb-pagination (pageChange)="paginateEvent.emit($event)" [collectionSize]="collectionSize" [pageSize]="pageSize" [(page)]="page" aria-label="Custom pagination">
    <ng-template ngbPaginationPrevious>Prev</ng-template>
    <ng-template ngbPaginationNext>Next</ng-template>
</ngb-pagination>

这是分页TS文件

import { Component, EventEmitter, Input, Output } from '@angular/core';
import { NgbPaginationConfig, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-pagination',
  standalone: true,
  imports: [NgbPaginationModule],
  templateUrl: './pagination.component.html',
  styleUrl: './pagination.component.css'
})
export class PaginationComponent {
@Input() page:number = 1
@Input() pageSize:number = 0
@Input() collectionSize:number = 0
@Output() paginateEvent = new EventEmitter<number>();

constructor(
  ngbPaginationConfig: NgbPaginationConfig
){
  ngbPaginationConfig.size = 'sm';
}
}

请注意,我从后端每页收到10个项目。

1 回复 | 直到 1 年前

Naren Murali 1 年前

问题似乎出在服务器端,你正在获取一个特定的结果页面,然后进行过滤,因此你得到了这种行为。为了解决这个问题,您应该首先在服务器上过滤搜索字符串,然后按页面获取数据。

我建议您放弃角度侧过滤,而专注于过滤API侧的数据。

...
export class OpdPatientsComponent implements OnInit {
  public opdPatients: Opd[] = [];
  public filteredOpdPatients: Opd[] = [];
  public paginationData: Pagination = {} as Pagination;
  public componentQuery = new HttpParams();
  public searchQuery: string = '';

  constructor(
    private coreService: CoreService,
    private router: Router,
    private dashboardService: DashboardService,
    private ngbModal: NgbModal
  ) {}

  ngOnInit(): void {
    this.getPatients();
  }

  getPatients(): void {
    this.componentQuery.set('searchString', this.searchQuery);
    this.coreService.getOpds(this.componentQuery).subscribe({
      next: (res: any) => {
        this.opdPatients = res.data;
        this.paginationData = res;
        this.filterPatients();
      }
    });
  }

  paginateTo(page: number): void {
    this.componentQuery = this.componentQuery.set('page', page);
    this.getPatients();
  }
}

我们还可以去掉TS和HTML中的过滤代码:

<div>
  <input type="text" [(ngModel)]="searchQuery" />
</div>
...