0

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

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;
        });
    };
}

よろしく

4

1 に答える 1