我正在Angular 2中创建一个表组件,我在其中创建一个公共表搜索过滤器管道,它正常工作,但没有在适当的列中显示值.当我开始在文本框中键入搜索键时,过滤后的值会正确显示,但不会显示在相应的列下.很抱歉,如果这个问题是重复的,我已经花了足够的时间搜索网页,但我无法得到解决方案.
以下是供您参考的代码
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
{{colValues}}
{{rowValues}}
全功能的Plunker,帮助我解决问题
我想你想要这样:https://plnkr.co/edit/olkIEiOc67Ld28NuASef？p = preview
你不想"隐藏"整体td,而只是想"隐藏"价值.
@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;
}
}
}
{{ rowValues | searchPipe : searchFilter.value }}
UPDATE
要显示整行,您必须过滤您的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));
}
}
}
{{ rowValues }}
现场演示:https://plnkr.co/edit/jXfqfCuJpKdw9HtL569T?p=preview
京公网安备 11010802040832号 | 京ICP备19059560号-6 