javascript - 如何在ngx-pagination中制作过滤器
问题描述
在 Angular 7 + Electron 4 中,我使用 ngx-pagination 但无法解决过滤器问题。
我在文档中制作,但出现错误Uncaught Error: Template parse errors: The pipe 'stringFilter' could not be found
请帮帮我。在此先感谢
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;
}
}
在表服务中:
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 删除了用于过滤的管道。
推荐阅读
- reactjs - 从前端到后端的基本数据发布
- android - 如何在 Android kotlin、Moshi 和 Retrofit 中使用动态键解析嵌套 JSON?
- c# - DataTypeAnnotations MetadataType 未按预期工作
- javascript - 通过单击外部关闭菜单
- reactjs - 基于路由切换 App.js 中的组件,仅在刷新时有效
- c++ - 将 std::sort 与自定义类一起使用
- linux - 如何在 go 中正确实现挂载命名空间
- c# - 如何修复 MS Visual Studio 软件包安装错误?版本 16.3.9
- java - Hibernate 可以将列的子集映射到内部子 Pojo
- java - 传递对没有类名的静态方法的引用?