Ag grid Ag网格外部过滤器位于angular 2中，过滤器出现，但网格未更新

app.component.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>

{{portId}

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 ...");
}

public isExternalFilterPresent（）{
返回this.portType！=“所有端口”；
}
公共DoeSternalFilterPass（节点）{
开关（this.portType）{
案例“1”：返回node.data.Port==“1”；
案例“2”：返回node.data.Port==“2”；
案例“3”：返回node.data.Port==“3”；
默认值：返回true；
}
}
公共外部筛选器更改（）{
var newValue=（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（this.gridOption.isAnyFilterPresented（）），我注意到在更新下拉菜单时过滤器确实存在。但是，网格不会根据外部过滤器进行更新

---

我非常确定“isExternalFilterPresent（）”和“DoeSternalFilterPass（node）”贯穿其中并提供了正确的返回值。我的理解是，ag grid将负责其余部分，但它没有这样做。有什么想法吗？

关于这个问题的最新消息：

我的问题是角度2变量的作用域

isExternalFilterPresent（）

和

DoeSternalFilterPass（节点）

中未定义此.portType，即使我在构造函数中正确初始化。我的修复方法是每次调用这两个函数时从HTML中检索portType

---

这不是个好办法，希望有人能想出更好的办法。如果有人能解释为什么未定义

portType

变量？

这个问题有一个解决方案

声明两个函数：isExternalFilterPresent、类型脚本中的DoeSternalFilterPass、

获取gridOptions的一个实例

  private gridOptions:GridOptions;

在构造器中：

  this.gridOptions = <GridOptions>{};

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

   this.myVariable

问题+解决方案的完整描述：

---

DOESternalFilterPass

和

isExternalFilterPresent

是一个箭头函数，因此

此

在这些函数中没有任何意义。下面是如何使用它们-

/**
   * This property is an arrow function, which binds `this` to the Angular Component.
   * It's necessary otherwise `this` is undefined inside the function because
   * it's not called as a method of the class by the Datagrid.
   * It's called as `doesExternalFilterPass(node)` and not as `component.doesExternalFilterPass(node)`
   */
  doesExternalFilterPass = (node: RowNode): boolean => {
    return node.data.currency >= this.currencyFilter;
  }

---

来源-

这应该是公认的答案；重新连接上下文是比在DOM中搜索数据更好的解决方案。这太棒了！很好的修复和很好的基本原理解释

/**
   * This property is an arrow function, which binds `this` to the Angular Component.
   * It's necessary otherwise `this` is undefined inside the function because
   * it's not called as a method of the class by the Datagrid.
   * It's called as `doesExternalFilterPass(node)` and not as `component.doesExternalFilterPass(node)`
   */
  doesExternalFilterPass = (node: RowNode): boolean => {
    return node.data.currency >= this.currencyFilter;
  }