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

3

管道是管道，而不是真正的过滤器。它用于更改输入。在这种情况下，您的输入是数组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;
                }
            }              
        });
    };
}
于 2017-01-23T11:01:48.867 回答