当我搜索年龄,体重,身高和移动电话之类的数字值时,我试图过滤嵌套数组值以及对象名称正在过滤。如果与searchText匹配,则必须与对象一起返回特定值,否则返回完整数组而不是未找到消息。
pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(items: any, filter: any, defaultFilter: boolean): any {
if (!filter || !Array.isArray(items)) {
return items;
}
if (filter && Array.isArray(items)) {
let filterKeys = Object.keys(filter);
if (defaultFilter) {
return items.filter(item =>
filterKeys.reduce((x, keyName) =>
(x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
}
else {
return items.filter(item => {
return filterKeys.some((keyName) => {
return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
});
});
}
}
}
}
app.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testJobNestedArray';
searchableList: any;
searchText : string = "";
users : any;
constructor() { }
ngOnInit() {
this.users = [
{
name: 'manpreet',
data:{
age: 25,
weight: 65,
height: 5.6,
mobile: [9780698969, 6895741258]
}
},
{
name: 'abdul',
data: {
age: 26,
weight: 80,
height: 6.0,
mobile: [3698541258]
}
},
{
name: 'onkar',
data: {
age: 28,
weight: 70,
height: 5.8,
mobile: [8569741236, 6528965478]
}
}
]
// this.searchableList = ['name', 'age', 'weight', 'height', 'mobile']
console.log('this.users', this.users)
}
}
app.html
<router-outlet></router-outlet>
<div>
<h1>Nested Array Table</h1>
<div class="md-form">
<input type="text" [(ngModel)]="searchText" class="form-control" name="searchText" placeholder="Search" />
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Age</th>
<th>Weight</th>
<th>Height</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="let item of users| FilterPipe:
{name: searchText, age: searchText, weight: searchText, height: searchText, mobile: searchText}; let i = index">
<td>{{ i+1 }}</td>
<td>{{ item.name }}</td>
<th>{{ item.data.age }}</th>
<td>{{ item.data.weight }}</td>
<td>{{ item.data.height}}</td>
<td>{{ item.data.mobile }}</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分:0)
在FilterPipe类中,请如下更改else语句
return items.filter(item => {
return filterKeys.some((keyName) => {
return new RegExp(filter[keyName], 'gi').test(item[keyName]) ||
new RegExp(filter[keyName], 'gi').test(item.data[keyName]) ||
filter[keyName] == "";
});
});
问题是缺少数据对象下的属性。在下面的链接中查看工作代码