我的自定义管道（过滤器）在 Angular 2 中不起作用

Question

我创建了自己的管道，用于过滤 table 中的任何字段。当我将字符串放入搜索框中时，它会在我的控制台中正确打印 'found'，但 table 中未显示任何行。当我完全移除管道时，一切正常，table 包含所有记录。

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

此致

Answer 1

管道就是管道，并不是真正的过滤器。它用于改变输入。在这种情况下，您的输入是数组 data.rows，您只想显示与特定输入参数 filterValue 匹配的行。在这种情况下，您想要 return 过滤后的数组，而不是 true 或 false 值。另一方面，你真的应该保持你的管道纯净，因为..这是一个纯净的管道。它仅在输入更改时更改 (filterValue):

@Pipe({
    name: 'myTableFilter'
})
@Injectable()
export class MyTableFilterPipe implements PipeTransform {
    transform(items: any[], filterValue: string): any {
        if(!items) {
          return [];
        }
        if(!filterValue) {
          return items;
        }
        return items.filter(item => {
            for(let value of item) {
                if(String(value).indexOf(filterValue) !== -1) {   
                    return true;
                }
            }              
        });
    };
}

我的自定义管道（过滤器）在 Angular 2 中不起作用

My custom pipe (filter) does not work in Angular 2

typescript

angular2-pipe

angular