使用angular2的ag-grid外部过滤器

Question

我想用angular2在ag-grid上实现外部过滤。

Ag网格example on github似乎没有实现外部过滤器和a similar question has not been answered。有没有一种方法可以用angular2在ag-grid中实现外部过滤器？

我有以下几点：

模板：

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

我遇到的问题是：中的引用了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网格方法中访问，并且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; 
    } 
}