Angular 2表搜索管道过滤器不起作用 [英] Angular 2 Table Search Pipe Filter not working
问题描述
我正在Angular 2中创建一个表组件,在其中创建了一个通用的表搜索过滤器管道,它可以正常工作,但不会在相应的列中显示值。
当我开始在文本框中键入搜索键时,过滤后的值会正确显示,但不会显示在其相应列下。
很抱歉,如果这个问题重复出现,我已经在网络上花了足够的时间,但是我无法找到解决方案。
I am creating a table component in Angular 2, in which I am creating a common table search filter pipe, it is working correctly but not displaying the values in their appropriate columns. When I start typing the search keys in the text box the filtered values are displayed correctly but not under their appropriate columns. Sorry if this question is a duplicated one, I have spent enough time in searching the web but I was unable to get a solution for it.
下面是供您参考的代码
component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public tableData: any = [
{"Name":"Gaurav","Address":"Chennai","Contact":"9632587410"},
{"Name":"Rakesh","Address":"Goa","Contact":"852397410"}
];
}
Pipe.ts
@Pipe({
name: 'searchPipe'
})
export class searchPipe implements PipeTransform {
transform(value: any, args: string[]): any {
let filter = args[0];
if (filter && Array.isArray(value)) {
let filterKeys = Object.keys(filter);
return value.filter(item =>
filterKeys.reduce((key, keyName) =>
key && item[keyName].toUpperCase() === filter[keyName].toUpperCase(), true));
} else {
return value;
}
}
}
component.html
<input type="text" #searchFilter (keyup)="0"/>
<table>
<tr>
<th *ngFor="let colValues of tableData | columnPipe">{{colValues}}</th>
</tr>
<tr *ngFor="let row of tableData">
<td *ngFor="let rowValues of row | rowPipe |searchPipe:searchFilter.value">{{rowValues}}</td>
</tr>
</table>
完全正常工作柱塞,帮助我解决问题
Full working Plunker, help me in resolving the issues
推荐答案
我想您想要像这样: https://plnkr.co/edit/olkIEiOc67Ld28NuASef?p=preview
您不想隐藏整个 td
,而是只想隐藏值..
You dont want to "hide" the whole td
, instead you just want to "hide" the value..
@Pipe({
name: 'searchPipe'
})
export class searchPipe implements PipeTransform {
transform(value: any, args: string[]): any {
let filter = args[0];
if (filter && Array.isArray(value)) {
let filterKeys = Object.keys(filter);
return value.filter(item => filterKeys.reduce((key, keyName) => key && item[keyName].toUpperCase() === filter[keyName].toUpperCase(), true));
}
// new case !
else if (filter && typeof value === 'string') {
return value.toUpperCase().indexOf(filter.toUpperCase()) >= 0 ? value : '';
}
else {
return value;
}
}
}
<td *ngFor="let rowValues of row | rowPipe">{{ rowValues | searchPipe : searchFilter.value }}</td>
更新
要显示整行,必须过滤 tableData
。
To show the whole row, you have to filter your tableData
.
按如下所示更改管道:
@Pipe({
name: 'searchPipe'
})
export class searchPipe implements PipeTransform {
transform(values: any[], filter: string): any {
if (!values || !values.length) return [];
if (!filter) return values;
filter = filter.toUpperCase();
if (filter && Array.isArray(values)) {
const keys = Object.keys(values[0]);
return values.filter(v => v && keys.some(k => v[k].toUpperCase().indexOf(filter) >= 0));
}
}
}
<tr *ngFor="let row of tableData | searchPipe : searchFilter.value">
<td *ngFor="let rowValues of row | rowPipe">{{ rowValues }}</td>
</tr>
实时演示: https://plnkr.co/edit/jXfqfCuJpKdw9HtL569T?p=preview
这篇关于Angular 2表搜索管道过滤器不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!