Ag-grid外部过滤器(角度2)，过滤器存在，但网格未更新 [英] Ag-grid external filter in angular 2, filter presents but grid not updating

问题描述

app.component.html

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>

app.component.ts

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())，我注意到当下拉菜单更新时该过滤器确实存在.但是，网格未根据外部过滤器进行更新.

By console.log(this.gridOption.isAnyFilterPresented()), I notice the filter does exist when dropdown menu is updated. However, the grid is not updating according to external filter.

我非常确定"isExternalFilterPresent()"和"doesExternalFilterPass(node)"会一直运行并提供正确的返回值.我的理解是，ag-grid将负责其余的工作，但不会这样做.有什么主意吗?

I am pretty sure "isExternalFilterPresent()" and "doesExternalFilterPass(node)" run through and provides the correct return value. My understanding is that ag-grid will take care of the rest but it is not doing it. Any idea?

推荐答案

此问题的更新:

对我来说，问题是角度2变量的范围.即使在构造函数中正确初始化了this.portType，在isExternalFilterPresent()和doesExternalFilterPass(node)中也未定义.我的解决方法是每次调用这两个函数时都从HTML检索portType.

The problem for me is the scope in angular 2 variables. this.portType is undefined in isExternalFilterPresent() and doesExternalFilterPass(node) even I initialized properly in the constructor. My fix is to retrieve portType from HTML each time those two functions are called.

这不是一个很好的解决方法，希望有人可以提出更好的建议.谁能解释为什么未定义portType变量的原因?

It is not a nice fix, hopefully, someone could come up with something better. And if anyone could explain why the portType variable was undefined?

这篇关于Ag-grid外部过滤器(角度2)，过滤器存在，但网格未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！