Question

我创建了自己的管道，用于过滤表格中的任何字段。当我将一个字符串放入搜索框时，它会打印出“找到”字样。在我的控制台中正确但表中没有显示任何行。当我完全删除管道时，一切正常，表包含所有记录。

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匹配的行。在这种情况下，您希望返回已过滤的数组，而不是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中不起作用

1 个答案: