【发布时间】：2020-10-15 07:42:57
【问题描述】：
我正在寻找数据表上的单个列搜索，我 已经使用了使用管道的通用搜索栏现在我必须 为每列的搜索实现适当的功能，即搜索 按 ID、按姓名搜索、按年龄搜索等。会很 如果有人能帮我解决这个问题，会很有帮助。
app.html
<router-outlet></router-outlet>
<div>
<h1>Nested Array Table</h1>
<div class="md-form">
<input type="text" [(ngModel)]="searchText" class="form-control" id="search" 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>
<tfoot>
<tr>
<th><input type="text" id="search id" placeholder="Search by ID" /></th>
<th><input type="text" id="search name" placeholder="Search by Name" /></th>
<th><input type="text" id="search age" placeholder="Search by Age" /></th>
<th><input type="text" id="search weight" placeholder="Search by Weight" /></th>
<th><input type="text" id="search height" placeholder="Search by Height" /></th>
<th><input type="text" id="search mobile" placeholder="Search by Mobile" /></th>
</tr>
</tfoot>
<tbody>
<tr
*ngFor="let item of ItemsArray| 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>
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;
public searchText : string;
public ItemsArray : any;
constructor() { }
ngOnInit() {
this.ItemsArray = [
{
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.ItemsArray', this.ItemsArray)
}
}
管道.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) => {
console.log(filter[keyName])
return new RegExp(filter[keyName], 'gi').test(item[keyName]) ||
new RegExp(filter[keyName], 'gi').test(item.data[keyName]) ||
filter[keyName] == "";
});
});
}
}
}
}
【问题讨论】：
标签： javascript angular angular-pipe