[英]Angular 2 Table Search Pipe Filter not working
我正在 Angular 2 中創建一個表組件,我在其中創建了一個通用的表搜索過濾器管道,它工作正常但沒有在相應的列中顯示值。 當我開始在文本框中鍵入搜索鍵時,過濾后的值會正確顯示,但不會顯示在相應的列下。 對不起,如果這個問題是重復的,我已經花了足夠的時間在網上搜索,但我無法找到解決方案。
下面是代碼供您參考
組件.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;
}
}
}
組件.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
您不想“隱藏”整個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;
}
}
}
<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>
現場演示: https : //plnkr.co/edit/jXfqfCuJpKdw9HtL569T?p=preview
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.