I have implemented a custom pipe for filtering data in my table. Oddly, when I enter a search string into the input box, it correctly prints 'found' in the console but no rows are displayed in the table. However, if I remove the pipe altogether, all records show up as expected.
import { Component, Input, OnInit } from '@angular/core';
import { MyTableData } from '../interfaces/my-table-data.interface'
@Component({
selector: 'my-table',
template: `
<div style="width: 100%">
<div style="float: left; height: 50px; width: 100%">
Search: <input type="text" [(ngModel)]="filterValue" style="height: 30px; border: 1px solid silver"/>
</div>
<div style="float: left; width: 100%">
<table>
<tr *ngFor="let row of data.rows | myTableFilter:filterValue">
<td *ngFor="let value of row">{{value}}</td>
</tr>
</table>
</div>
</div>
`
})
export class MyTableComponent implements OnInit {
@Input() data: MyTableData;
filterValue: string;
ngOnInit() {
}
}
and pipe:
import { Component, Injectable, Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'myTableFilter',
pure: false
})
@Injectable()
export class MyTableFilterPipe implements PipeTransform {
transform(items: any[], arg: string): any {
if(arg == '') return true;
items.filter(item => {
for(let value of item) {
if(String(value).indexOf(arg) !== -1) {
console.log('found match') //it prints correctly
return true;
}
}
return false;
});
};
}
Best regards