jhipster 过滤器结果正确返回，但是当我单击 UI 导航到结果集中的第 2 页时，我再次获得未过滤的结果答案

【问题标题】：jhipster filter results are returned correclty but when I click the UI to navigate to page 2 in the result set I get the unfiltered results back againjhipster 过滤器结果正确返回，但是当我单击 UI 导航到结果集中的第 2 页时，我再次获得未过滤的结果
【发布时间】：2020-11-30 17:07:27
【问题描述】：

我使用生成器通过 JDL 导入创建实体和过滤（使用服务类）。都好。花了一些时间，但我想出了如何使用 UI 中的表单字段条目使过滤器工作

<form [formGroup]="filterForm" (ngSubmit)="onEnter()">
   <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>

并在component.ts类中添加了需要的方法

 onEnter(): void {
      if (this.filterForm.get('ticker').value) {
          this.signalServiceService
          .query({ 'ticker.contains': this.filterForm.get('ticker').value })
          .subscribe(
            (res: HttpResponse<ISignalService[]>) => this.onSuccess(res.body, res.headers, 1, true),
            () => this.onError()
          );;
      }
  }

这非常适合在我创建的字段中输入我的值以进行过滤，然后按回车键并将结果正确返回到 UI。

我面临的问题是，当我单击 UI 导航按钮以移至结果集中的第 2 页时，会调用 loadPage 函数，该函数会用整个结果集覆盖我的过滤结果，这意味着我进入第 2 页但包含整个未过滤的结果集。

那么问题是如何在 UI 中跨页面点击维护过滤结果集？

提前感谢任何人提供的任何帮助或提示，以便为我指明正确的方向。

我应该添加这是一个使用 generator-jhipster@6.10.3 的带有 mysql H2 的 jhipster 整体

【问题讨论】：

第一步是确定您的请求是否正确构建，或者问题是否来自响应处理。你是在signalServiceService.query() 中调用createRequestOption 来添加分页HttpParams 吗？您是否在调试器下的服务器中获得了正确的Pageable，它是否用于您的查询服务？
你能提供更多关于loadPage的信息吗？那是组件中的方法吗？如果您可以提供单击“第 2 页”时触发的内容的 sn-ps（它是路由器插座还是方法？），那将很有帮助
谢谢你们两位的cmets。 @GaëlMarziou - 你是对的，我发现我的实现有两个问题 1）我的函数 onEnter 是不必要的，我需要修改 jhipster 创建的 loadPage 函数和 2）基于这个新的 loadPage 函数，HttpParams 请求必须正确形成请求实用程序。我会发布我的完整答案

标签： angular pagination jhipster

【解决方案1】：

我找到了这个https://gitlab.com/ImperfectClone/jhipster-filter-criteria-test

这帮助我实现了以下内容：

UI 中的表单

<form name="searchForm" class="form-inline">
    <input type="text" class="form-control" 
       [(ngModel)]="criteria.ticker" id="tickerSerchText" name="tickerSerchText" >
            <button class="input-group-addon btn btn-info" (click)="loadPage()">
                 <span class="fa fa-search"></span>
            </button>
</form>

用搜索值的占位符修改组件的构造函数

constructor(
    protected signalServiceService: SignalServiceService,
    protected activatedRoute: ActivatedRoute,
    protected dataUtils: JhiDataUtils,
    protected router: Router,
    protected eventManager: JhiEventManager,
    protected modalService: NgbModal
  ) {
        this.criteria = {
          ticker: null 
        }
  }

修改jHipster创建的loadPage方法，在UI字段输入值时将搜索值添加到请求中

loadPage(page?: number, dontNavigate?: boolean): void {
    
    const pageToLoad: number = page || this.page || 1;

    const criteria = [];

    if (this.criteria.ticker != null && this.criteria.ticker !== '') {
      criteria.push({key: 'ticker.contains', value: this.criteria.ticker});
    }
    
    this.signalServiceService
      .query({ 
        page: pageToLoad - 1,
        size: this.itemsPerPage,
        sort: this.sort(),
        criteria
      })
      .subscribe(
        (res: HttpResponse<ISignalService[]>) => this.onSuccess(res.body, res.headers, pageToLoad, !dontNavigate), 
        () => this.onError()
      );
  }

修改 jHipster 在 request-utils.ts 中创建的 createRequestOption 以在存在时将条件设置到请求对象中

  if (req) {
    Object.keys(req).forEach(key => {
      if (key !== 'sort') {
        if (key !== 'criteria') {
          options = options.set(key, req[key]);
        } else {
          req.criteria.forEach((criterion: { key: string; value: string; }) => {
            options = options.set(criterion.key, criterion.value);
          });
        }
      }
    });

    if (req.sort) {
      req.sort.forEach((val: string) => {
        options = options.append('sort', val);
      });
    }
  }

构建并运行

【讨论】：