如何在ngx-pagination中制作过滤器答案

【问题标题】：How make filter in ngx-pagination如何在ngx-pagination中制作过滤器
【发布时间】：2019-08-10 13:07:22
【问题描述】：

在 Angular 7 + Electron 4 中，我使用 ngx-pagination 但无法解决过滤器问题。
我在documentation 中制作，但我收到错误未捕获错误：模板解析错误：找不到管道“stringFilter”
请帮帮我。提前致谢
html-1：

<input
  type="text"
  name="search"
  class="search__input"
  placeholder="Search by Name..."
  [(ngModel)]="tableService.filter">

HTML-2：

<ul class="table-body__list">
 <li *ngFor="let item of tableService.items | stringFilter: tableService.filter | paginate: config">
   <app-item [item]="item"></app-item>
 </li>
</ul>

<pagination-controls
  [maxSize]="maxSize"
  directionLinks="true"
  responsive="true"
  previousLabel="Previous page"
  nextLabel="Next page"
  (pageChange)="onPageChange($event)">        
</pagination-controls>

打字稿：

import { Component, OnInit } from '@angular/core';
import { PaginationInstance } from 'ngx-pagination';
import { TableService } from '../../services/table.service';
@Component({
  selector: 'app-jobs-table',
  templateUrl: './jobs-table.component.html',
  styleUrls: ['./jobs-table.component.scss']
})
export class JobsTableComponent implements OnInit {
  filter = '';
  maxSize = 9;
  config: PaginationInstance = {
    itemsPerPage: 11,
    currentPage: 1
  };

  constructor(public tableService: TableService) { }

  ngOnInit() {
  }

  onPageChange(number: number) {
    this.config.currentPage = number;
  }

}

在 TableService 中：

filter = '';

【问题讨论】：

用filter 代替stringFilter 怎么样。有更好的结果吗？
你应该创建管道stringFilter
ng g p stringFilter ?
| filter: tableService.filter | , | tableService.filter |, | tableService.filter: filter | 都不起作用

标签： javascript angular pagination

【解决方案1】：

在 github 上找到（在存储库中搜索过滤器）。显然 npx-pagination 没有任何标准的过滤器管道。他们的文档是....次优

import {Pipe} from "@angular/core";

/**
 * A simple string filter, since Angular does not yet have a filter pipe built in.
 */
@Pipe({
    name: 'stringFilter'
})
export class StringFilterPipe {

    transform(value: string[], q: string) {
        if (!q || q === '') {
            return value;
        }
        return value.filter(item => -1 < item.toLowerCase().indexOf(q.toLowerCase()));
    }
}

顺便说一句有趣的评论：由于性能原因，Angular 移除了用于过滤的管道。

【讨论】：

非常感谢。就我而言，我编写了代码：` ... transform(itemList: Item[], searchStr: string): Item[] { if (itemList.length === 0 || searchStr === '') { return itemList; } return itemList.filter((item) => { return item.title.toLowerCase().indexOf(searchStr.toLowerCase()) !== -1 || item.employer.toLowerCase().indexOf(searchStr.toLowerCase( )) !== -1; }); } `

【解决方案2】：

你只能用 filter 改变 stringFilter 。

<ul class="table-body__list">
 <li *ngFor="let item of tableService.items | filter: tableService.filter | paginate: config">
   <app-item [item]="item"></app-item>
 </li>
</ul>

【讨论】：