这里我有folderObjs
数组和该数组的控制台位于下面的代码中,我将搜索输入字段放在搜索输入字段中,我想按角度搜索该数组的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();
}
创建自定义管道
过滤器.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)
}
}
组件.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 https://stackblitz.com/edit/angular-mrgzw3
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)