ag-grid внешний фильтр с использованием углового2

Question

Я хочу реализовать внешнюю фильтрацию на ag-сетке с угловым2.

Ag-grid example on github, похоже, не использует внешние фильтры и a similar question has not been answered. Есть ли способ реализации внешних фильтров в ag-сетке с угловым2?

У меня есть следующие:

Шаблон:

<input (keyup)="updateFilters($event)" name="filterAgreementNumber" #filterAgreementNumber/> 

<ag-grid-ng2 #agGrid 
     style="width: 100%;" 
     [style.height.px]="height" 
     class="ag-fresh" 
     [gridOptions]="gridOptions" 
     [rowData]="promises" 
     (window:resize)="onResize($event)"> 

Компонент:

export class PromisesListComponent { 
    private gridOptions: GridOptions; 
    private promises: Promise[]; 
    filterAgreementNumber = ''; 

    constructor(private promisesService: PromisesService) { 
     this.gridOptions = { 
      rowData: this.promises, 
      columnDefs: this.createColumnDefs(), 
      enableColResize: true, 
      enableSorting: true, 
      enableFilter: true, 
      isExternalFilterPresent: this.externalFilterPresent, 
      doesExternalFilterPass: this.externalFilterPass,    
    } 

    updateFilters(event: any) { 
     this.filterAgreementNumber = event.target.value; //correctly assigns property 
     this.gridOptions.api.onFilterChanged(); 
    } 

    externalFilterPass(node: any) { 
     console.log(this.getFilterAgreementNumber); //undefined 
     if (this.filterAgreementNumber && this.filterAgreementNumber.length > 0) 
      if (node.data.AgreementCode.indexOf(this.filterAgreementNumber) === -1) 
      return false; 

     return true; 
    } 
} 

Проблема, которую я имею что this в externalFilterPass относится к узлу ag-grid, и у меня нет доступа к свойству класса.

Answer 1

В конструкторе вместо

this.gridOptions = { 
    ... 
    isExternalFilterPresent: this.externalFilterPresent, 
    doesExternalFilterPass: this.externalFilterPass 
} 

попробовать

this.gridOptions = { 
    ... 
    isExternalFilterPresent: this.externalFilterPresent.bind(this), 
    doesExternalFilterPass: this.externalFilterPass.bind(this) 
} 

Теперь контекст компонента будет доступен из методов ag-grid, а this будет тем, что вы ожидали от него.

Источник: https://stackoverflow.com/a/41965934/6432429

Answer 2

Вы добавили @Injectable() над своим классом?

также: переписать функцию gridOptions следующим образом:

 ..., doesExternalFilterPass: (node) => { return this.doesExternalFilterPass(this, node); }, ... 

и использовать в своем классе:

private doesExternalFilterPass(gcs, node): boolean { 
    if (<GridRowStatus>gcs.gridActionsService.filter) { 
     console.log(gcs.gridActionsService.filter); 
     console.log(node.data); 
     return gcs.rowStatusService.contains(node.data, [gcs.gridActionsService.filter]); 
    } else { 
     return true; 
    } 
}