テーブル内の任意のフィールドをフィルタリングするために独自のパイプを作成しました。検索ボックスに文字列を入力すると、コンソールに「見つかりました」と正しく表示されますが、テーブルに行が表示されません。パイプを完全に削除すると、すべてが正常に機能し、テーブルにはすべてのレコードが含まれます。
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() {
}
}
そしてパイプ:
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;
});
};
}
よろしく