Как отфильтровать более одного столбца в ng2-таблице?

Question

Я использую ng2-таблицу: https://github.com/valor-software/ng2-table компонент, но мне нужно добавить фильтр для каждого столбца.

В моем коде у меня есть фильтрация в столбце: имя, но я хочу добавить фильтр для кода тоже.

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

  };

Как я могу добавить еще один фильтр?

Я действительно ценю, если кто-то может дать мне пример.

Answer 1

Прежде всего, нужно создать конфигурацию для полей, которые вы хотите отфильтровать. Я собираюсь использовать пример, предоставленный в http://valor-software.com/ng2-table/ в качестве основы. Так что в вашем component.ts вы бы имели:

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

Каждый столбец для фильтрации будет хранить указанную строку в filterString поле. columnName здесь нет необходимости, так как я жестко его кодирую. Затем в html создайте входные данные, по одному на фильтр:

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

И, наконец, реальный фильтр данных (снова в файле 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));
}

Обратите внимание, что я использую логику AND для фильтрации, вы можете использовать OR.