在角度搜索输入字段? [英] search input field in angular?
本文介绍了在角度搜索输入字段?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在这里,我有folderObjs
数组,并且该数组的Console在下面的代码中,我输入了搜索输入字段,我想按角度通过folderName和folderSize进行此数组的搜索吗?
HTML
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>
<div *ngFor="let folder of folderObjs">
<span>{{folder.folderName}}</span>
<span>{{folder.folderSize}}</span>
</div>
TS
folderObjs : Folder[] = [];
applyFilter(filterValue) {
console.log(this.folderObjs);
// 0: {folderid: 781, folderName: "pelu folder",folderActivity: "true", …}
1: {folderid: 782, folderName: "biju folder", folderActivity: "true", …}
filter: "d"
length: 2
this.folderObjs.filter = filterValue.trim().toLowerCase();
}
解决方案
创建自定义管道
filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(value: any, searchValue): any {
if (!searchValue) return value;
return value.filter((v) =>
v.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1 ||
v.size.toLowerCase().indexOf(searchValue.toLowerCase()) > -1)
}
}
component.ts
<input type="search" [(ngModel)]="search">
<div *ngFor="let f of (folderObjs | filter:search)as folder">
{{f.name}}
{{f.size}}
</div>
<div *ngIf="(folderObjs | filter:search).length <1">
Not Found
</div>
示例: https://stackblitz.com/edit/angular-mrgzw3 >
Here I have folderObjs
array and Console of this array is in below code, I put search input field and I want to make search for this array by folderName and folderSize in angular how it is possible?
HTML
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search">
</mat-form-field>
<div *ngFor="let folder of folderObjs">
<span>{{folder.folderName}}</span>
<span>{{folder.folderSize}}</span>
</div>
TS
folderObjs : Folder[] = [];
applyFilter(filterValue) {
console.log(this.folderObjs);
// 0: {folderid: 781, folderName: "pelu folder",folderActivity: "true", …}
1: {folderid: 782, folderName: "biju folder", folderActivity: "true", …}
filter: "d"
length: 2
this.folderObjs.filter = filterValue.trim().toLowerCase();
}
解决方案
Create custom pipe
filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(value: any, searchValue): any {
if (!searchValue) return value;
return value.filter((v) =>
v.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1 ||
v.size.toLowerCase().indexOf(searchValue.toLowerCase()) > -1)
}
}
component.ts
<input type="search" [(ngModel)]="search">
<div *ngFor="let f of (folderObjs | filter:search)as folder">
{{f.name}}
{{f.size}}
</div>
<div *ngIf="(folderObjs | filter:search).length <1">
Not Found
</div>
Example:https://stackblitz.com/edit/angular-mrgzw3
这篇关于在角度搜索输入字段?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文