怎么在Angular6中使用Filter实现一个页面搜索功能

本篇文章为大家展示了怎么在Angular6中使用Filter实现一个页面搜索功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

第一步

新建一个名为 filter.pipe.ts 的文件，这部分是实现的核心代码：

import{Pipe,PipeTransform}from'@angular/core';

@Pipe({
name:'globalFilter'
})
exportclassGlobalFilterPipeimplementsPipeTransform{
transform(items:any,filter:any,defaultFilter:boolean):any{
if(!filter){
returnitems;
}

if(!Array.isArray(items)){
returnitems;
}

if(filter&&Array.isArray(items)){
letfilterKeys=Object.keys(filter);

if(defaultFilter){
returnitems.filter(item=>
filterKeys.reduce((x,keyName)=>
(x&&newRegExp(filter[keyName],'gmi').test(item[keyName]))||filter[keyName]=="",true));
}
else{
returnitems.filter(item=>{
returnfilterKeys.some((keyName)=>{
returnnewRegExp(filter[keyName],'gmi').test(item[keyName])||filter[keyName]=="";
});
});
}
}
}
}

代码部分的正则表达式可以根据需要替换，这里是全局匹配。

第二步

在app.module.ts 文件中导入。

import{GlobalFilterPipe}from'./shared/filter.pipe';

registerLocaleData(zh);

@NgModule({
declarations:[
GlobalFilterPipe,
]

第三步

在需要的html 文件中应用，在 componet 中定义一个搜索框的变量。

<nz-input-groupnzSearchnzSize="large"[nzSuffix]="suffixButton">
<inputtype="text"[(ngModel)]="searchText"nz-inputplaceholder="inputsearchtext">
</nz-input-group>
<ng-template#suffixButton>
<buttonnz-buttonnzType="primary"nzSize="large"nzSearch>Search</button>
</ng-template>
<br>
<br>
<nz-card*ngFor="lettopDataoftopCategoriesData"nzTitle="{{topData.categoryName}}">
<divnz-card-grid[ngStyle]="gridStyle"*ngFor="letsecondDataoftopData.subCategories|globalFilter:{categoryName:searchText,categoryCode:searchText}">

<nz-collapse>
<nz-collapse-panel[nzHeader]="secondData.categoryName+'('+secondData.categoryCode+')'"[nzActive]="false"[nzDisabled]="false">
<nz-select(nzOpenChange)="loadMore(secondData.categoryId)"nzPlaceHolder="请选择..."nzAllowClear>
<nz-option*ngFor="letthirdDataofthirdCategoriesData|globalFilter:{categoryName:searchText,categoryCode:searchText}"[nzValue]="thirdData.categoryId"[nzLabel]="thirdData.categoryName+'('+thirdData.categoryCode+')'"></nz-option>
<nz-option*ngIf="isLoading"nzDisablednzCustomContent>
<inz-icontype="loading"class="loading-icon"></i>LoadingData...
</nz-option>
</nz-select>
</nz-collapse-panel>
</nz-collapse>
<!--<a>{{secondData.categoryName}}</a><b>({{secondData.categoryCode}})</b>-->
</div>
<ng-template#extraTemplate>
<a>二级分类数量：{{data.subCategories.length}}</a>
</ng-template>
</nz-card>

import{Component,OnInit}from'@angular/core';
import{CategoryService}from'../category.service';

@Component({
selector:'app-category',
templateUrl:'../pages/category.component.html',
styleUrls:['../pages/category.component.css']
})
exportclassCategoryComponentimplementsOnInit{
//todo搜索无法由下至上匹配1,2级数据
publicsearchText:string;

topCategoriesData=[];

thirdCategoriesData=[];

isLoading=false;

constructor(privatecategoryService:CategoryService){}
loadMore(id):void{
this.isLoading=true;
this.categoryService.getThirdById(id).subscribe((data:any)=>{
this.isLoading=false;
this.thirdCategoriesData=data;
});
}

ngOnInit():void{
this.categoryService.getCategoriesTop().subscribe(
(data:any)=>{
this.topCategoriesData=data;
});
}

}

上述内容就是怎么在Angular6中使用Filter实现一个页面搜索功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注恰卡编程网行业资讯频道。