[英]How make filter in ngx-pagination
In Angular 7 + Electron 4 I use ngx-pagination but can't resolve problem with filter.在 Angular 7 + Electron 4 中,我使用 ngx-pagination 但无法解决过滤器问题。
I make as in a documentation , but I get error Uncaught Error: Template parse errors: The pipe 'stringFilter' could not be found我在文档中制作,但出现错误未捕获错误:模板解析错误:找不到管道“stringFilter”
Help me please.请帮帮我。 Thanks in advance
提前致谢
Html-1: html-1:
<input
type="text"
name="search"
class="search__input"
placeholder="Search by Name..."
[(ngModel)]="tableService.filter">
Html-2: 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>
TypeScript:打字稿:
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;
}
}
In TableService:在表服务中:
filter = '';
As found on github (search on filter in the repository).如在 github 上找到的(在存储库中搜索过滤器)。 apparently npx-pagination doesn't come with any standard filter pipes.
显然 npx-pagination 没有任何标准的过滤器管道。 their doc is .... sub-optimal
他们的文档是......次优
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()));
}
}
Funny comment btw: Angular removed pipes for filtering because of performance reasons.有趣的评论顺便说一句:由于性能原因,Angular 删除了用于过滤的管道。
you ca only change stringFilter with filter .
您只能使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.