Angular 2 Table 搜索管道过滤器不工作
Angular 2 Table Search Pipe Filter not working
我正在 Angular 2 中创建一个 table 组件,我正在其中创建一个通用的 table 搜索过滤器管道,它工作正常但不显示它们中的值适当的列。
当我开始在文本框中键入搜索键时,过滤后的值会正确显示,但不会显示在相应的列下。
对不起,如果这个问题是重复的,我已经花了足够的时间在网上搜索,但我无法找到解决方案。
下面是代码供大家参考
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>
全力以赴Plunker,帮我解决问题
我猜你想要这样:https://plnkr.co/edit/olkIEiOc67Ld28NuASef?p=preview
您不想 "hide" 整个 td
,而是只想 "hide" 值..
@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
。
像这样改变你的管道:
@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] && v[k].toString().toUpperCase().indexOf(filter) >= 0));
}
}
}
<tr *ngFor="let row of tableData | searchPipe : searchFilter.value">
<td *ngFor="let rowValues of row | rowPipe">{{ rowValues }}</td>
</tr>
我正在 Angular 2 中创建一个 table 组件,我正在其中创建一个通用的 table 搜索过滤器管道,它工作正常但不显示它们中的值适当的列。 当我开始在文本框中键入搜索键时,过滤后的值会正确显示,但不会显示在相应的列下。 对不起,如果这个问题是重复的,我已经花了足够的时间在网上搜索,但我无法找到解决方案。
下面是代码供大家参考
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>
全力以赴Plunker,帮我解决问题
我猜你想要这样:https://plnkr.co/edit/olkIEiOc67Ld28NuASef?p=preview
您不想 "hide" 整个 td
,而是只想 "hide" 值..
@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
。
像这样改变你的管道:
@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] && v[k].toString().toUpperCase().indexOf(filter) >= 0));
}
}
}
<tr *ngFor="let row of tableData | searchPipe : searchFilter.value">
<td *ngFor="let rowValues of row | rowPipe">{{ rowValues }}</td>
</tr>