Come filtrare in più di una colonna nella tabella ng2?

Question

Sto usando ng2-table: https://github.com/valor-software/ng2-table componente ma ho bisogno di aggiungere un filtro per ogni colonna.

Nel mio codice ho il filtro nella colonna: nome ma voglio aggiungere anche un filtro per il codice.

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

    }; 

Come posso aggiungere un altro filtro?

Apprezzo molto se qualcuno può darmi un esempio.

Answer 1

La prima cosa è creare config per i campi che si desidera filtrare. Ho intenzione di utilizzare l'esempio fornito in http://valor-software.com/ng2-table/ come base. Quindi nel tuo component.ts si avrebbe:

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

Ogni colonna per filtrare memorizzerà la stringa specificata nel campo filterString. Lo columnName non è necessario qui, poiché lo sto codificando. Poi, nel codice HTML, creare gli ingressi, uno per ogni filtro:

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

E infine, il vero filtro dei dati (ancora una volta nel file 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)); 
} 

Si noti che Sto usando la logica AND qui per filtrare, potresti volerli OR.