gpt4 book ai didi

javascript - 如何在ngx-pagination中进行过滤

转载 作者:行者123 更新时间:2023-12-02 23:59:06 24 4
gpt4 key购买 nike

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

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

}

在表服务中:

filter = '';

最佳答案

在 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 删除了用于过滤的管道。

关于javascript - 如何在ngx-pagination中进行过滤,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55250595/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com