使用 angular2 的 ag-grid 外部滤波器答案

【问题标题】：ag-grid external filter using angular2使用 angular2 的 ag-grid 外部滤波器
【发布时间】：2017-01-30 23:15:31
【问题描述】：

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

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

我遇到的问题是externalFilterPass 中的this 指的是ag-grid 节点，我无法访问类属性。

【问题讨论】：

如果您考虑替代方案，PrimeNG DataTable 具有外部过滤器功能。 primefaces.org/primeng/#/datatablefilter

标签： angular ag-grid

【解决方案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

【讨论】：

【解决方案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;
    }
}

【讨论】：