角度 2 中的 Ag-grid 外部过滤器，过滤器出现但网格不更新

Question

应用程序组件.html

<div class="inlineBlock">
    <select [(ngModel)]="portId" id="portDropdownMenu" (change)="externalFilterChanged()">
        <option *ngFor="#portId of portIds">{{portId}}</option>
    </select>
</div>

<div class="container">
    <ag-grid-ng2 #agGrid
                 [gridOptions]="gridOptions"
                 [columnDefs]="myColumnDefs"
                 [rowData]="myRowData"
                 enableColResize
                 rowSelection="multiple"
                 enableSorting
                 enableFilter
                 [isExternalFilterPresent]="isExternalFilterPresent"
                 [doesExternalFilterPass]="doesExternalFilterPass"
                 rowHeight="30"
                 headerHeight="40"
                 enableRangeSelection
                 suppressContextMenu
                 suppressMenuColumnPanel
                 rowGroupPanelShow="always"
                 rememberGroupStateWhenNextData
                 groupDefaultExpanded="-1"
                 groupHideGroupColumns
                 groupUseEntireRow
                 (modelUpdated)="onModelUpdated()"
                 (filterChanged)="onFilterChanged()">
    </ag-grid-ng2>
</div>

app.component.ts

public isExternalFilterPresent() {
        return this.portType != "All Ports";
}

public doesExternalFilterPass(node) {
    switch (this.portType) {
        case "1": return node.data.Port === "1";
        case "2": return node.data.Port === "2";
        case "3": return node.data.Port === "3";
        default: return true;
    }

}

public externalFilterChanged() {
    var newValue = (<HTMLInputElement>document.getElementById("portDropdownMenu")).value
    this.portType = newValue;
    this.gridOptions.api.onFilterChanged();
}

public onFilterChanged() {
    if (this.gridOptions.api.isAnyFilterPresent()) {
        this.gridOptions.api.setRowData(this.gridOptions.rowData);
        this.gridOptions.api.refreshView();
    }
    console.log("filter changed ...");
}

通过 console.log(this.gridOption.isAnyFilterPresented())，我注意到更新下拉菜单时过滤器确实存在。但是，网格不会根据外部过滤器进行更新。

我很确定“isExternalFilterPresent()”和“doesExternalFilterPass(node)”运行并提供正确的返回值。我的理解是 ag-grid 会处理其余的事情，但它并没有这样做。任何的想法？

Answer 1

这个问题有一个解决方案。

声明两个函数:isExternalFilterPresent,doesExternalFilterPass in type script,

获取 gridOptions 的实例，

  private gridOptions:GridOptions;

并在构造函数中:

  this.gridOptions = <GridOptions>{};

然后

  this.gridOptions.isExternalFilterPresent  =  this.isExternalFilterPresent.bind(this);
  this.gridOptions.doesExternalFilterPass = this.doesExternalFilterPass.bind(this);

现在，您将能够在这些函数中访问组件的变量:

   this.myVariable

完整描述问题+解决方案:
https://github.com/ceolter/ag-grid-ng2/issues/121