Angular 搜索字段的管道
Angular Pipe for search field
我有一个过滤搜索字段的管道,并根据搜索文本显示项目列表。目前,它仅过滤 companyDisplay。目标是过滤 companyCode 和 companyDisplay
JSON
[{
companyDisplay: "ABC",
companyName: "EFG",
companyCode: "1234"
}]
搜索管道
import { Pipe, PipeTransform } from '@angular/core'; // serach text sorting
@Pipe({
name: 'searchCompanyPipe'
})
export class SearchPipe implements PipeTransform {
transform(items: any[], searchText: any): any[] {
if (!items) { return []; }
if (!searchText) { return items; }
searchText = searchText.toLowerCase();
return items.filter(i => {
return (i.companyDisplay || i.companyCode).toLowerCase().includes(searchText);
});
}
}
HTML
<li *ngFor="let data of companyInfo| searchPipe:searchValue">
companyInfo
持有 json。
这里的问题是下面的代码:
(i.companyDisplay || i.companyCode)
总是returns companyDisplay
只要它不是假值。您需要使用类似:
return i.companyDisplay.toLowerCase().includes(searchText) || i.companyCode.toLowerCase().includes(searchText);
我有一个过滤搜索字段的管道,并根据搜索文本显示项目列表。目前,它仅过滤 companyDisplay。目标是过滤 companyCode 和 companyDisplay
JSON
[{
companyDisplay: "ABC",
companyName: "EFG",
companyCode: "1234"
}]
搜索管道
import { Pipe, PipeTransform } from '@angular/core'; // serach text sorting
@Pipe({
name: 'searchCompanyPipe'
})
export class SearchPipe implements PipeTransform {
transform(items: any[], searchText: any): any[] {
if (!items) { return []; }
if (!searchText) { return items; }
searchText = searchText.toLowerCase();
return items.filter(i => {
return (i.companyDisplay || i.companyCode).toLowerCase().includes(searchText);
});
}
}
HTML
<li *ngFor="let data of companyInfo| searchPipe:searchValue">
companyInfo
持有 json。
这里的问题是下面的代码:
(i.companyDisplay || i.companyCode)
总是returns companyDisplay
只要它不是假值。您需要使用类似:
return i.companyDisplay.toLowerCase().includes(searchText) || i.companyCode.toLowerCase().includes(searchText);