Jak filtrować w więcej niż jednej kolumnie w tabeli ng2?

Question

Używam składnika ng2-table: https://github.com/valor-software/ng2-table, ale muszę dodać filtr dla każdej kolumny.

W moim kodzie mam filtrowanie w kolumnie: name, ale chcę dodać filtr także dla kodu.

public columns:Array<any> = [ 
    {title: 'Code', name: 'code',sort: 'asc'}, 
    {title: 'Name', name: 'name', sort: 'asc'} 
    ]; 
    public page:number = 1; 
    public itemsPerPage:number = 1; 
    public maxSize:number = 5; 
    public numPages:number = 1; 
    public length:number = 0; 
    public config:any = { 
    paging: true, 
    sorting: {columns: this.columns}, 
    filtering: {filterString: '', columnName:'name'} 

    }; 

Jak mogę dodać kolejny filtr?

Naprawdę doceniam, że ktoś może dać mi przykład.

Answer 1

Pierwszą rzeczą jest utworzenie konfiguracji dla pól, które chcesz filtrować. Zamierzam posłużyć się przykładem podanym w http://valor-software.com/ng2-table/ jako bazie. Więc w swoim component.ts trzeba:

public config: any = { 
    sorting: { columns: this.columns }, 
    filtering: { 
     position: { filterString: '' }, 
     office: { filterString: '' } 
    } 
}; 

Każda kolumna filtrowania będzie przechowywać określony ciąg znaków w polu filterString. Ten columnName nie jest tu konieczny, ponieważ próbuję go kodować. Następnie w html, tworzenie wejść, po jednej w filtrze:

<input placeholder="Position" 
     [ngTableFiltering]="config.filtering.position" 
     (tableChanged)="onChangeTable(config)"/> 
<input placeholder="Office" 
     [ngTableFiltering]="config.filtering.office" 
     (tableChanged)="onChangeTable(config)"/> 

<ng-table [config]="config.sorting" 
       (tableChanged)="onChangeTable(config)" 
       [rows]="rows" [columns]="columns"> 
</ng-table> 

i wreszcie prawdziwy filtr danych (ponownie w pliku component.ts):

public changeFilter(data: any, config: any): any { 
    return data.filter((item: any) => 
     item["position"].match(this.config.filtering.position.filterString) && 
     item["office"].match(this.config.filtering.office.filterString)); 
} 

Należy pamiętać, że Używam tutaj logiki AND, aby filtrować, możesz je OR'ingować.