Tìm kiếm trang web

typescript - Nhiều bộ lọc trên Angular 2


Tôi đang cố gắng lọc một bảng bằng nhiều bộ lọc. Vào bất kỳ thời điểm nào, tôi có thể chỉ nhập một bộ lọc hoặc tất cả các bộ lọc và danh sách cần trả về tương ứng - Tôi đã thành công khi tất cả các bộ lọc được nhập - nhưng khi tôi chọn chỉ một trong số đó, việc lọc không thành công - Vui lòng xem mã của tôi cho đến nay

tệp 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>   

Trong filter.pipe.ts của tôi

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

Nếu tôi cố gắng sử dụng || trên bất kỳ điều khoản nào ở trên, thì rõ ràng nó sẽ chỉ chọn một trong số đó, nhưng tôi muốn có khả năng lọc theo bất kỳ hoặc tất cả các bộ lọc ở trên.

Vui lòng cho tôi biết ý kiến của bạn.

Cảm ơn nhiều! S