Question

我正在尝试使用多个过滤器过滤一个表。在任何时间点，我都可以让一个或所有过滤器键入，并且列表需要相应地返回 - 当所有过滤器都被键入时我已经成功 - 但当我选择其中任何一个时，过滤失败 - 请注意我的代码到目前为止

filter.html文件 -

 <tr>
                    <td><input type="text" [(ngModel)]='field1Filter ' /></td>
                    <td><input type="text" [(ngModel)]='field2Filter ' /></td>
                    <td><input type="text" [(ngModel)]='field3Filter ' /></td>
                    <td><input type="text" [(ngModel)]='field4Filter ' /></td>
                </tr>   

<tr *ngFor='let acct of Accts  | acctFilter :field1Filter :field2Filter :field3Filter :field4Filter'>                                                                                                                    
                    <td>{{acct.field1}}</td>
                    <td>{{acct.field2}}</td>
                    <td>{{acct.field3}}</td>
                    <td>{{acct.field4}}</td>
                    <td>{{acct.field5}}</td>
                    <td>{{acct.field6}}</td>
                    <td>{{acct.field7| date}}</td>
                    <td>{{acct.field8| date}}</td>

在我的filter.pipe.ts

中

import { PipeTransform, Pipe } from '@angular/core';
import { IAcct } from './Acct';

@Pipe({

    name: 'acctFilter'

})
export class AcctFilterPipe implements PipeTransform {

    transform(value: IAcct[], field1Filter : any, field2Filter : any, field3Filter : any, field4Filter : any): IAcct[] {
        field1Filter = field1Filter ? field1Filter .toLocaleLowerCase() : null;
        field2Filter = field2Filter ? field2Filter .toLocaleLowerCase() : null;
        field3Filter = field3Filter ? field3Filter .toLocaleLowerCase() : null;
        field4Filter = field4Filter ? field4Filter .toLocaleLowerCase() : null;

        return field1Filter && field2Filter && field3Filter && field4Filter  ? value.filter((acct: IAcct) =>
            (acct.field1.toLocaleLowerCase().indexOf(field1Filter) !== -1)
        && (acct.field2.toLocaleLowerCase().indexOf(field2Filter ) !== -1) && (acct.field3.toLocaleLowerCase().indexOf(field3Filter ) !== -1) &&  (acct.field4.toLocaleLowerCase().indexOf(field4Filter  ) !== -1)) : value;             
    }                           
}

如果我尝试使用||在上述任何一个条款中，它只会选择其中一个，但我希望能够过滤任何或所有上述过滤器。

请告诉我您的意见。

非常感谢！小号

Angular 2上的多个过滤器

0 个答案: